quasar-ui-danx 0.0.10 → 0.0.11

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>
+    <QPopupProxy>
+      <QDate
+        v-model="date"
+        @update:model-value="onSave"
+      />
+    </QPopupProxy>
+  </div>
+</template>
+
+<script setup>
+import { CalendarIcon as DateIcon } from "@heroicons/vue/outline";
+import { fDate, parseQDate } from "danx/src/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">
+      <QDate
+        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>
+      <QPopupProxy>
+        <QDate
+          v-model="dateRange"
+          range
+          @update:model-value="onSave"
+        />
+      </QPopupProxy>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { CalendarIcon as DateIcon } from "@heroicons/vue/outline";
+import { fDate, parseQDate, parseQDateTime } from "danx/src/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>
+    <QInput
+      :model-value="fLocalizedDateTime(modelValue)"
+      :color="color"
+      class="bg-white rounded overflow-hidden px-2 w-48"
+      dense
+      readonly
+      @click="isShowing = true"
+    >
+      <template #append>
+        <QIcon name="event" class="cursor-pointer">
+          <QPopupProxy v-model="isShowing">
+            <DateTimePicker
+              v-model="dateTime"
+              @cancel="isShowing = false"
+              @save="onSave"
+            />
+          </QPopupProxy>
+        </QIcon>
+      </template>
+    </QInput>
+  </div>
+</template>
+
+<script setup>
+import DateTimePicker from "danx/src/components/ActionTable/Form/Fields/DateTimePicker";
+import { fLocalizedDateTime } from "danx/src/helpers/formats";
+import { ref } from "vue";
+
+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>
+  <QPopupProxy
+    :model-value="true"
+    cover
+    transition-show="scale"
+    transition-hide="scale"
+    class="bg-transparent shadow-none flex items-stretch"
+  >
+    <QDate v-model="dateTime" :mask="mask" :color="color">
+      <div class="flex items-center justify-center">
+        <div v-if="nullable" class="flex-grow">
+          <QBtn label="Clear" color="blue-base" flat @click="dateTime = null" />
+        </div>
+        <div>
+          <QBtn
+            label="Cancel"
+            color="blue-base"
+            flat
+            @click="$emit('cancel')"
+          />
+          <QBtn label="Set" color="blue-base" flat @click="$emit('save')" />
+        </div>
+      </div>
+    </QDate>
+    <QTime v-model="dateTime" :mask="mask" :color="color" class="ml-3" />
+  </QPopupProxy>
+</template>
+<script setup>
+import { dbDateTime, localizedDateTime, remoteDateTime } from "danx/src/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>
+  <QBtn 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"
+    />
+  </QBtn>
+</template>
+<script setup>
+import { PlusIcon } from "@heroicons/vue/outline";
+import { FileUpload } from "danx/src/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" />
+      <QPopupEdit
+        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"
+        />
+      </QPopupEdit>
+    </div>
+  </div>
+</template>
+<script setup>
+import { PencilIcon as EditIcon } from "@heroicons/vue/solid";
+import DateTimePicker from "danx/src/components/ActionTable/Form/Fields/DateTimePicker";
+import { fLocalizedDateTime } from "danx/src/helpers/formats";
+
+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 "danx/src/components/ActionTable/Form/Fields/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/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">
+      <QInput
+        :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 "components/Common/ImagePreview";
+import FieldLabel from "danx/src/components/ActionTable/Form/Fields/FieldLabel";
+import { useMultiFileUpload } from "src/helpers/multiFileUpload";
+import { onMounted } from "vue";
+
+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>