quasar-ui-danx 0.0.11 → 0.0.12

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

@@ -1,44 +1,44 @@
 <template>
-  <QBtn v-bind="$props" @click="$refs.fileUpload.click()">
+  <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"
+        ref="fileUpload"
+        data-testid="file-upload"
+        type="file"
+        :accept="geolocation ? 'image/*;capture=camera' : undefined"
+        :capture="geolocation ? 'environment' : undefined"
+        class="hidden"
+        multiple
+        @change="onAttachFiles"
     />
-  </QBtn>
+    </q-btn>
 </template>
 <script setup>
-import { PlusIcon } from "@heroicons/vue/outline";
-import { FileUpload } from "danx/src/helpers";
-import { QBtn } from "quasar";
-import { ref } from "vue";
+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"
+  'uploading',
+  'file-progress',
+  'file-complete',
+  'complete'
 ]);
 const props = defineProps({
   ...QBtn.props,
   text: {
     type: String,
-    default: "Add File"
+    default: 'Add File'
   },
   locationWaitMessage: {
     type: String,
-    default: "Waiting for location..."
+    default: 'Waiting for location...'
   },
   geolocation: Boolean
 });
@@ -56,18 +56,18 @@ function upload() {
  * @returns {Promise<void>}
  */
 async function onAttachFiles({ target: { files } }) {
-  emit("uploading", 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);
-    });
+      .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);

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

@@ -1,33 +1,33 @@
 <template>
   <div class="inline-block">
     <div
-      class="cursor-pointer py-2 hover:bg-blue-light flex items-center justify-end"
+        class="cursor-pointer py-2 hover:bg-blue-light flex items-center justify-end"
     >
-      {{ fLocalizedDateTime(modelValue, { empty: "Never" }) }}
+      {{ 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"
+      <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"
+            v-model="scope.value"
+            :nullable="nullable"
+            @save="onSave(scope)"
+            @cancel="scope.cancel"
         />
-      </QPopupEdit>
+        </q-popup-edit>
     </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";
+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"]);
+const emit = defineEmits(['close', 'save', 'update:model-value']);
 defineProps({
   modelValue: {
     type: String,
@@ -37,8 +37,8 @@ defineProps({
 });
 
 function onSave(scope) {
-  emit("update:model-value", scope.value);
-  emit("save", scope.value);
+  emit('update:model-value', scope.value);
+  emit('save', scope.value);
   scope.set();
 }
 </script>

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

@@ -1,17 +1,17 @@
 <template>
   <NumberField
-    :field="field"
-    :precision="0"
-    :model-value="modelValue"
-    :show-name="showName"
-    @update:model-value="$emit('update:model-value', $event)"
+      :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";
+import NumberField from './NumberField';
 
-defineEmits(["update:model-value"]);
+defineEmits(['update:model-value']);
 defineProps({
   modelValue: {
     type: [String, Number],

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

@@ -4,34 +4,34 @@
       <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)"
+      <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"]);
+defineEmits(['update:model-value']);
 defineProps({
   type: {
     type: String,
-    default: "text"
+    default: 'text'
   },
   name: {
     type: String,

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

@@ -1,58 +1,58 @@
 <template>
   <div
-    class="max-w-full relative overflow-auto"
-    :class="{'p-4 border rounded border-gray-medium': !readonly}"
-    @dragover.prevent
-    @drop.prevent="onDrop"
+      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"
+        :field="field"
+        :show-name="showName"
+        class="text-sm font-semibold"
     />
     <div
-      v-if="!disable && !readonly"
-      class="text-sm my-2"
+        v-if="!disable && !readonly"
+        class="text-sm my-2"
     >
       <a
-        class="text-blue-base"
-        @click="$refs.file.click()"
+          class="text-blue-base"
+          @click="$refs.file.click()"
       >Upload</a>
       <a
-        v-if="uploadedFiles.length > 0"
-        class="ml-3 text-red-dark"
-        @click="onClear"
+          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"
+          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)"
+          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()"
+          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"
+          v-if="readonly && uploadedFiles.length === 0"
+          class="p-1"
       >
         --
       </div>
@@ -61,12 +61,12 @@
 </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";
+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 emit = defineEmits(['update:model-value']);
 const props = defineProps({
   modelValue: {
     type: [Object, String],
@@ -87,5 +87,5 @@ onMounted(() => {
     uploadedFiles.value = props.modelValue;
   }
 });
-onComplete(() => emit("update:model-value", uploadedFiles.value));
+onComplete(() => emit('update:model-value', uploadedFiles.value));
 </script>

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

@@ -1,37 +1,37 @@
 <template>
   <div>
     <SelectField
-      v-model="selectedFieldName"
-      :label="undefined"
-      :options="field.options"
-      class="mb-2"
-      @update:model-value="onChange"
+        v-model="selectedFieldName"
+        :label="undefined"
+        :options="field.options"
+        class="mb-2"
+        @update:model-value="onChange"
     />
     <TextField
-      v-model="textInput"
-      :field="field"
-      :no-label="!field.label"
-      label-class="text-xs font-bold text-gray-dark"
-      parent-class="tight-label"
-      input-class="!py-0"
-      dense
-      type="textarea"
-      :debounce="500"
-      @update:model-value="onChange"
+        v-model="textInput"
+        :field="field"
+        :no-label="!field.label"
+        label-class="text-xs font-bold text-gray-dark"
+        parent-class="tight-label"
+        input-class="!py-0"
+        dense
+        type="textarea"
+        :debounce="500"
+        @update:model-value="onChange"
     />
   </div>
 </template>
 
 <script setup>
-import SelectField from "danx/src/components/ActionTable/Form/Fields/SelectField";
-import TextField from "danx/src/components/ActionTable/Form/Fields/TextField";
-import { computed, ref, watch } from "vue";
+import { computed, ref, watch } from 'vue';
+import SelectField from './SelectField';
+import TextField from './TextField';
 
-const emit = defineEmits(["update:model-value"]);
+const emit = defineEmits(['update:model-value']);
 const props = defineProps({
   modelValue: {
     type: [String, Number, Object],
-    default: ""
+    default: ''
   },
   field: {
     type: Object,
@@ -43,12 +43,12 @@ const selectedFieldName = ref(props.field.defaultOption);
 const searchList = computed(() => props.modelValue && props.modelValue[selectedFieldName.value]);
 const textInput = ref(formatModelValue());
 function onChange() {
-  textInput.value = textInput.value?.replace(/\n/g, ",").replace(/,{2,}/g, ",") || "";
-  emit("update:model-value", textInput.value ? { [selectedFieldName.value]: textInput.value.split(",") } : undefined);
+  textInput.value = textInput.value?.replace(/\n/g, ',').replace(/,{2,}/g, ',') || '';
+  emit('update:model-value', textInput.value ? { [selectedFieldName.value]: textInput.value.split(',') } : undefined);
 }
 
 function formatModelValue() {
-  return Array.isArray(searchList.value) ? searchList.value?.join(",") : "";
+  return Array.isArray(searchList.value) ? searchList.value?.join(',') : '';
 }
 
 watch(() => props.modelValue, () => {

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

@@ -1,28 +1,28 @@
 <template>
   <LabeledInput
-    type="password"
-    v-bind="props"
-    :rules="rules"
-    @update:model-value="$emit('update:model-value', $event)"
+      type="password"
+      v-bind="props"
+      :rules="rules"
+      @update:model-value="$emit('update:model-value', $event)"
   />
 </template>
 
 <script setup>
-import LabeledInput from "danx/src/components/ActionTable/Form/Fields/LabeledInput";
+import LabeledInput from './LabeledInput';
 
-defineEmits(["update:model-value"]);
+defineEmits(['update:model-value']);
 const props = defineProps({
   name: {
     type: String,
-    default: "password"
+    default: 'password'
   },
   label: {
     type: String,
-    default: "Password"
+    default: 'Password'
   },
   placeholder: {
     type: String,
-    default: "Enter Password"
+    default: 'Enter Password'
   },
   modelValue: {
     type: [String, Number],
@@ -35,5 +35,5 @@ const props = defineProps({
   disabled: Boolean
 });
 
-const rules = [(val) => val.length >= 8 || "Please use at least 8 characters"];
+const rules = [(val) => val.length >= 8 || 'Please use at least 8 characters'];
 </script>

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

@@ -1,34 +1,34 @@
 <template>
-  <QInput
-    :model-value="numberVal"
-    :data-testid="'number-field-' + fieldOptions.id"
-    :placeholder="fieldOptions.placeholder"
-    outlined
-    dense
-    inputmode="numeric"
-    :input-class="{[inputClass]: true, 'text-right bg-white': !hidePrependLabel, 'text-right !text-xs text-black font-normal': hidePrependLabel}"
-    :class="{'no-prepend-icon w-32': hidePrependLabel, 'prepend-label': !hidePrependLabel}"
-    @update:model-value="onInput"
+  <q-input
+      :model-value="numberVal"
+      :data-testid="'number-field-' + fieldOptions.id"
+      :placeholder="fieldOptions.placeholder"
+      outlined
+      dense
+      inputmode="numeric"
+      :input-class="{[inputClass]: true, 'text-right bg-white': !hidePrependLabel, 'text-right !text-xs text-black font-normal': hidePrependLabel}"
+      :class="{'no-prepend-icon w-32': hidePrependLabel, 'prepend-label': !hidePrependLabel}"
+      @update:model-value="onInput"
   >
     <template #prepend>
       <FieldLabel
-        :field="fieldOptions"
-        :show-name="showName"
+          :field="fieldOptions"
+          :show-name="showName"
       />
     </template>
-  </QInput>
+    </q-input>
 </template>
 
 <script setup>
-import FieldLabel from "danx/src/components/ActionTable/Form/Fields/FieldLabel";
-import { fNumber } from "danx/src/helpers/formats";
-import { computed, nextTick, ref, watch } from "vue";
+import { fNumber } from '@ui/helpers/formats';
+import { computed, nextTick, ref, watch } from 'vue';
+import FieldLabel from './FieldLabel';
 
-const emit = defineEmits(["update:model-value"]);
+const emit = defineEmits(['update:model-value']);
 const props = defineProps({
   modelValue: {
     type: [String, Number],
-    default: ""
+    default: ''
   },
   precision: {
     type: Number,
@@ -44,7 +44,7 @@ const props = defineProps({
   },
   inputClass: {
     type: String,
-    default: ""
+    default: ''
   },
   hidePrependLabel: Boolean,
   currency: Boolean,
@@ -54,41 +54,41 @@ const props = defineProps({
 const numberVal = ref(format(props.modelValue));
 watch(() => props.modelValue, () => numberVal.value = format(props.modelValue));
 
-const fieldOptions = computed(() => props.field || { label: props.label || "", placeholder: "", id: "" });
+const fieldOptions = computed(() => props.field || { label: props.label || '', placeholder: '', id: '' });
 
 function format(number) {
-  if (!number && number !== 0 && number !== "0") return number;
+  if (!number && number !== 0 && number !== '0') return number;
 
-  const minimumFractionDigits = Math.min(props.precision, ("" + number).split(".")[1]?.length || 0);
+  const minimumFractionDigits = Math.min(props.precision, ('' + number).split('.')[1]?.length || 0);
   let options = {
     minimumFractionDigits
   };
 
   if (props.currency) {
     options = {
-      style: "currency",
-      currency: "USD",
+      style: 'currency',
+      currency: 'USD',
       minimumFractionDigits
     };
   }
   return fNumber(number, options);
 }
 function onInput(value) {
-  let number = "";
+  let number = '';
 
   // Prevent invalid characters
   if (value.match(/[^\d.,$]/)) {
     const oldVal = numberVal.value;
     // XXX: To get QInput to show only the value we want
-    numberVal.value += " ";
+    numberVal.value += ' ';
     return nextTick(() => numberVal.value = oldVal);
   }
 
-  if (value !== "") {
-    value = value.replace(/[^\d.]/g, "");
+  if (value !== '') {
+    value = value.replace(/[^\d.]/g, '');
     number = Number(value);
     numberVal.value = format(number);
   }
-  emit("update:model-value", number === "" ? undefined : number);
+  emit('update:model-value', number === '' ? undefined : number);
 }
 </script>