quasar-ui-danx 0.0.10 → 0.0.12

package/src/components/ActionTable/Form/Fields/DateField.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <div
+        v-if="label"
+        class="font-bold text-xs mb-2"
+    >
+      {{ label }}
+    </div>
+    <div class="flex items-center cursor-pointer">
+      <DateIcon class="w-5 text-blue-base" />
+      <div class="font-bold ml-3 hover:text-blue-base">
+        <template v-if="date">
+          {{ formattedDate }}
+        </template>
+        <template v-else>
+          -&nbsp;-
+        </template>
+      </div>
+    </div>
+    <q-popup-proxy>
+      <q-date
+          v-model="date"
+          @update:model-value="onSave"
+      />
+    </q-popup-proxy>
+  </div>
+</template>
+
+<script setup>
+import { CalendarIcon as DateIcon } from '@heroicons/vue/outline';
+import { fDate, parseQDate } from '@ui/helpers/formats';
+import { computed, ref, watch } from 'vue';
+
+const emit = defineEmits(['update:model-value']);
+const props = defineProps({
+  modelValue: {
+    type: [String, Object],
+    default: null
+  },
+  label: {
+    type: String,
+    default: null
+  }
+});
+
+const formattedDate = computed(() => {
+  if (props.modelValue) {
+    return fDate(parseQDate(props.modelValue || '0000-00-00'));
+  }
+  return null;
+});
+
+const date = ref(props.modelValue);
+watch(() => props.modelValue, val => date.value = val);
+
+function onSave() {
+  emit('update:model-value', date.value);
+}
+</script>

package/src/components/ActionTable/Form/Fields/DateRangeField.vue

@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <div
+        v-if="label"
+        class="font-bold text-xs mb-2"
+    >
+      {{ label }}
+    </div>
+    <template v-if="inline">
+      <q-date
+          v-model="dateRange"
+          range
+          class="reactive"
+          @update:model-value="onSave"
+      />
+    </template>
+    <template v-else>
+      <div class="flex items-center cursor-pointer">
+        <DateIcon class="w-5 text-blue-base" />
+        <div class="font-bold ml-3 hover:text-blue-base">
+          <template v-if="dateRangeValue">
+            {{ formattedDates.from }} - {{ formattedDates.to }}
+          </template>
+          <template v-else>
+            -&nbsp;-
+          </template>
+        </div>
+      </div>
+      <q-popup-proxy>
+        <q-date
+            v-model="dateRange"
+            range
+            @update:model-value="onSave"
+        />
+      </q-popup-proxy>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { CalendarIcon as DateIcon } from '@heroicons/vue/outline';
+import { fDate, parseQDate, parseQDateTime } from '@ui/helpers/formats';
+import { computed, ref, watch } from 'vue';
+
+const emit = defineEmits(['update:model-value']);
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: null
+  },
+  label: {
+    type: String,
+    default: null
+  },
+  inline: Boolean,
+  withTime: Boolean
+});
+
+const formattedDates = computed(() => {
+  if (dateRangeValue.value) {
+    if (props.withTime) {
+      return {
+        from: fDate(parseQDateTime(dateRangeValue.value.from || '0000-00-00')),
+        to: fDate(parseQDateTime(dateRangeValue.value.to || '9999-12-31'))
+      };
+    }
+
+    return {
+      from: fDate(parseQDate(dateRangeValue.value.from || '0000-00-00')),
+      to: fDate(parseQDate(dateRangeValue.value.to || '9999-12-31'))
+    };
+  }
+  return {
+    from: null,
+    to: null
+  };
+});
+
+const dateRange = ref(toQDateValue(props.modelValue));
+watch(() => props.modelValue, val => dateRange.value = toQDateValue(val));
+
+function toQDateValue(val) {
+  if (val?.from && val?.to) {
+    return fDate(val.from) === fDate(val.to) ? val.from : val;
+  }
+  return null;
+}
+
+const dateRangeValue = computed(() => {
+  let range = dateRange.value;
+
+  if (typeof range === 'string') {
+    range = {
+      from: range,
+      to: range
+    };
+  }
+
+  if (range?.from && range?.to && props.withTime) {
+    range.from += ' 00:00:00';
+    range.to += ' 23:59:59';
+  }
+
+  return range;
+});
+
+function onSave() {
+  emit('update:model-value', dateRangeValue.value);
+}
+</script>

package/src/components/ActionTable/Form/Fields/DateTimeField.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <q-input
+        :model-value="fLocalizedDateTime(modelValue)"
+        :color="color"
+        class="bg-white rounded overflow-hidden px-2 w-48"
+        dense
+        readonly
+        @click="isShowing = true"
+    >
+      <template #append>
+        <q-icon name="event" class="cursor-pointer">
+          <q-popup-proxy v-model="isShowing">
+            <DateTimePicker
+                v-model="dateTime"
+                @cancel="isShowing = false"
+                @save="onSave"
+            />
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+      </q-input>
+  </div>
+</template>
+
+<script setup>
+import { fLocalizedDateTime } from '@ui/helpers/formats';
+import { ref } from 'vue';
+import DateTimePicker from './DateTimePicker';
+
+const emit = defineEmits(['update:model-value']);
+const props = defineProps({
+  modelValue: {
+    type: String,
+    required: true
+  },
+  color: {
+    type: String,
+    default: 'blue-base'
+  }
+});
+
+const isShowing = ref(false);
+const dateTime = ref(props.modelValue);
+
+function onSave() {
+  emit('update:model-value', dateTime.value);
+  isShowing.value = false;
+}
+</script>

package/src/components/ActionTable/Form/Fields/DateTimePicker.vue

@@ -0,0 +1,59 @@
+<template>
+  <q-popup-proxy
+      :model-value="true"
+      cover
+      transition-show="scale"
+      transition-hide="scale"
+      class="bg-transparent shadow-none flex items-stretch"
+  >
+    <q-date v-model="dateTime" :mask="mask" :color="color">
+      <div class="flex items-center justify-center">
+        <div v-if="nullable" class="flex-grow">
+          <q-btn label="Clear" color="blue-base" flat @click="dateTime = null" />
+        </div>
+        <div>
+          <q-btn
+              label="Cancel"
+              color="blue-base"
+              flat
+              @click="$emit('cancel')"
+          />
+          <q-btn label="Set" color="blue-base" flat @click="$emit('save')" />
+        </div>
+      </div>
+    </q-date>
+    <q-time v-model="dateTime" :mask="mask" :color="color" class="ml-3" />
+  </q-popup-proxy>
+</template>
+<script setup>
+import { dbDateTime, localizedDateTime, remoteDateTime } from '@ui/helpers/formats';
+import { computed } from 'vue';
+
+const emit = defineEmits(['update:modelValue', 'save', 'cancel', 'clear']);
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: null
+  },
+  mask: {
+    type: String,
+    default: 'YYYY-MM-DD HH:mm'
+  },
+  color: {
+    type: String,
+    default: 'blue-base'
+  },
+  nullable: Boolean
+});
+
+const dateTime = computed({
+  get: () => dbDateTime(localizedDateTime(props.modelValue)),
+  set(value) {
+    const newValue = value ? dbDateTime(remoteDateTime(value)) : null;
+
+    if (newValue || props.nullable) {
+      emit('update:modelValue', newValue);
+    }
+  }
+});
+</script>

package/src/components/ActionTable/Form/Fields/EditableDiv.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    contenteditable
+    class="inline-block hover:bg-blue-light focus:bg-blue-light transition duration-300 outline-none"
+    @input="onInput"
+  >
+    {{ text }}
+  </div>
+</template>
+
+<script setup>
+import { useDebounceFn } from "@vueuse/core";
+import { ref } from "vue";
+
+const emit = defineEmits(["update:model-value", "change"]);
+const props = defineProps({
+  modelValue: {
+    type: String,
+    required: true
+  },
+  debounceDelay: {
+    type: Number,
+    default: 500
+  }
+});
+
+const text = ref(props.modelValue);
+
+const debouncedChange = useDebounceFn(() => {
+  emit("update:model-value", text.value);
+  emit("change", text.value);
+}, props.debounceDelay);
+
+function onInput(e) {
+  text.value = e.target.innerText;
+  debouncedChange();
+}
+
+</script>

package/src/components/ActionTable/Form/Fields/FieldLabel.vue

@@ -0,0 +1,32 @@
+<template>
+  <span>
+    <slot>
+      {{ labelText }}
+      <template v-if="showName">({{ field?.name }})</template>
+    </slot>
+    <span
+      v-if="requiredLabel"
+      class="text-red-dark ml-1 text-xs bottom-1 relative"
+    >{{ requiredLabel }}</span>
+  </span>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  field: {
+    type: Object,
+    default: null
+  },
+  label: {
+    type: String,
+    default: null
+  },
+  showName: Boolean,
+  required: Boolean
+});
+
+const labelText = computed(() => props.label || props.field?.label);
+const requiredLabel = computed(() => props.field?.required_group || (props.required || props.field?.required ? "*" : ""));
+</script>

package/src/components/ActionTable/Form/Fields/FileUploadButton.vue

@@ -0,0 +1,78 @@
+<template>
+  <q-btn v-bind="$props" @click="$refs.fileUpload.click()">
+    <slot>
+      <PlusIcon class="w-5 mr-2" />
+      {{ text }}
+    </slot>
+
+    <input
+        ref="fileUpload"
+        data-testid="file-upload"
+        type="file"
+        :accept="geolocation ? 'image/*;capture=camera' : undefined"
+        :capture="geolocation ? 'environment' : undefined"
+        class="hidden"
+        multiple
+        @change="onAttachFiles"
+    />
+    </q-btn>
+</template>
+<script setup>
+import { PlusIcon } from '@heroicons/vue/outline';
+import { FileUpload } from '@ui/helpers';
+import { QBtn } from 'quasar';
+import { ref } from 'vue';
+
+defineExpose({ upload });
+const emit = defineEmits([
+  'uploading',
+  'file-progress',
+  'file-complete',
+  'complete'
+]);
+const props = defineProps({
+  ...QBtn.props,
+  text: {
+    type: String,
+    default: 'Add File'
+  },
+  locationWaitMessage: {
+    type: String,
+    default: 'Waiting for location...'
+  },
+  geolocation: Boolean
+});
+
+const fileUpload = ref(null);
+
+function upload() {
+  fileUpload.value.click();
+}
+
+/**
+ * Upload newly attached files and emit events for progress / completion
+ *
+ * @param files
+ * @returns {Promise<void>}
+ */
+async function onAttachFiles({ target: { files } }) {
+  emit('uploading', files);
+  let fileUpload = new FileUpload(files)
+      .onProgress(({ file, progress }) => {
+        file.progress = progress;
+        emit('file-progress', file);
+      })
+      .onComplete(({ file, uploadedFile }) => {
+        emit('file-complete', { file, uploadedFile });
+      })
+      .onAllComplete(() => {
+        emit('complete', fileUpload.files);
+      });
+
+  if (props.geolocation) {
+    await fileUpload.resolveLocation(props.locationWaitMessage);
+  }
+
+  fileUpload.upload();
+}
+</script>

package/src/components/ActionTable/Form/Fields/InlineDateTimeField.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="inline-block">
+    <div
+        class="cursor-pointer py-2 hover:bg-blue-light flex items-center justify-end"
+    >
+      {{ fLocalizedDateTime(modelValue, { empty: 'Never' }) }}
+      <EditIcon class="w-4 font-bold ml-2 text-gray-base" />
+      <q-popup-edit
+          v-slot="scope"
+          :model-value="modelValue"
+          touch-position
+          :offset="[0, 20]"
+          class="bg-blue-base text-white !min-w-0"
+      >
+        <DateTimePicker
+            v-model="scope.value"
+            :nullable="nullable"
+            @save="onSave(scope)"
+            @cancel="scope.cancel"
+        />
+        </q-popup-edit>
+    </div>
+  </div>
+</template>
+<script setup>
+import { PencilIcon as EditIcon } from '@heroicons/vue/solid';
+import { fLocalizedDateTime } from '@ui/helpers/formats';
+import DateTimePicker from './DateTimePicker';
+
+const emit = defineEmits(['close', 'save', 'update:model-value']);
+defineProps({
+  modelValue: {
+    type: String,
+    default: null
+  },
+  nullable: Boolean
+});
+
+function onSave(scope) {
+  emit('update:model-value', scope.value);
+  emit('save', scope.value);
+  scope.set();
+}
+</script>

package/src/components/ActionTable/Form/Fields/IntegerField.vue

@@ -0,0 +1,26 @@
+<template>
+  <NumberField
+      :field="field"
+      :precision="0"
+      :model-value="modelValue"
+      :show-name="showName"
+      @update:model-value="$emit('update:model-value', $event)"
+  />
+</template>
+
+<script setup>
+import NumberField from './NumberField';
+
+defineEmits(['update:model-value']);
+defineProps({
+  modelValue: {
+    type: [String, Number],
+    required: true
+  },
+  field: {
+    type: Object,
+    required: true
+  },
+  showName: Boolean
+});
+</script>

package/src/components/ActionTable/Form/Fields/LabelValueBlock.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <div class="text-xs font-bold">{{ label }}</div>
+    <div :class="{'mt-2': !dense, 'mt-1': dense, 'text-no-wrap': nowrap}">
+      <slot>{{ value || "-" }}</slot>
+    </div>
+  </div>
+</template>
+<script setup>
+defineProps({
+  label: {
+    type: String,
+    required: true
+  },
+  value: {
+    type: [String, Number],
+    default: "-"
+  },
+  dense: Boolean,
+  nowrap: Boolean
+});
+</script>

package/src/components/ActionTable/Form/Fields/LabeledInput.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <label for="first_name" class="form-label">
+      <slot name="label">{{ label }}</slot>
+    </label>
+    <div class="mt-1">
+      <q-input
+          :model-value="modelValue"
+          :error-message="error"
+          :error="!!error"
+          no-error-icon
+          outlined
+          dense
+          :disable="disabled"
+          :readonly="disabled"
+          :type="type"
+          :name="name"
+          :placeholder="placeholder || label"
+          :required="required"
+          :rules="rules"
+          :lazy-rules="!!rules"
+          class="w-full"
+          @update:model-value="$emit('update:model-value', $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineEmits(['update:model-value']);
+defineProps({
+  type: {
+    type: String,
+    default: 'text'
+  },
+  name: {
+    type: String,
+    required: true
+  },
+  label: {
+    type: String,
+    default: null
+  },
+  placeholder: {
+    type: String,
+    default: null
+  },
+  modelValue: {
+    type: [String, Number],
+    required: true
+  },
+  error: {
+    type: String,
+    default: null
+  },
+  required: Boolean,
+  disabled: Boolean,
+  rules: {
+    type: Array,
+    default: null
+  }
+});
+</script>

package/src/components/ActionTable/Form/Fields/MultiFileField.vue

@@ -0,0 +1,91 @@
+<template>
+  <div
+      class="max-w-full relative overflow-auto"
+      :class="{'p-4 border rounded border-gray-medium': !readonly}"
+      @dragover.prevent
+      @drop.prevent="onDrop"
+  >
+    <FieldLabel
+        :field="field"
+        :show-name="showName"
+        class="text-sm font-semibold"
+    />
+    <div
+        v-if="!disable && !readonly"
+        class="text-sm my-2"
+    >
+      <a
+          class="text-blue-base"
+          @click="$refs.file.click()"
+      >Upload</a>
+      <a
+          v-if="uploadedFiles.length > 0"
+          class="ml-3 text-red-dark"
+          @click="onClear"
+      >Clear</a>
+      <input
+          ref="file"
+          class="hidden"
+          type="file"
+          multiple
+          @change="onFilesSelected"
+      />
+    </div>
+
+    <div class="max-w-[50em] flex items-stretch justify-start">
+      <ImagePreview
+          v-for="file in uploadedFiles"
+          :key="'file-upload-' + file.id"
+          class="w-32 m-2 cursor-pointer bg-neutral-plus-5"
+          :class="{'border border-dashed border-blue-base': !uploadedFiles.length}"
+          :image="file"
+          :related-files="uploadedFiles"
+          downloadable
+          :removable="!readonly && !disable"
+          @remove="onRemove(file)"
+      />
+      <ImagePreview
+          v-if="!disable && !readonly"
+          class="w-32 m-2 cursor-pointer border border-dashed border-blue-base"
+          disabled
+          @click="$refs.file.click()"
+      />
+      <div
+          v-if="readonly && uploadedFiles.length === 0"
+          class="p-1"
+      >
+        --
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ImagePreview } from '@ui/components';
+import { useMultiFileUpload } from '@ui/helpers';
+import { onMounted } from 'vue';
+import FieldLabel from './FieldLabel';
+
+const emit = defineEmits(['update:model-value']);
+const props = defineProps({
+  modelValue: {
+    type: [Object, String],
+    default: null
+  },
+  field: {
+    type: Object,
+    required: true
+  },
+  showName: Boolean,
+  disable: Boolean,
+  readonly: Boolean
+});
+
+const { onComplete, onDrop, onFilesSelected, uploadedFiles, onClear, onRemove } = useMultiFileUpload();
+onMounted(() => {
+  if (props.modelValue) {
+    uploadedFiles.value = props.modelValue;
+  }
+});
+onComplete(() => emit('update:model-value', uploadedFiles.value));
+</script>