quasar-ui-danx 0.3.11 → 0.3.13

package/src/components/ActionTable/Filters/FilterToolbarLayout.vue

@@ -1,19 +1,26 @@
 <template>
   <div class="w-full flex justify-end items-center flex-nowrap border-b">
     <FilterListToggle
-        :show-filters="showFilters"
-        :filter="filter"
-        class="border-r p-4 flex-shrink-0"
-        @update:show-filters="onFilter"
-        @update:filter="$emit('update:filter', $event)"
+      :show-filters="showFilters"
+      :filter="filter"
+      class="border-r p-4 flex-shrink-0"
+      @update:show-filters="onFilter"
+      @update:filter="$emit('update:filter', $event)"
     />
 
     <div class="flex-grow">
       <slot />
     </div>
 
-    <div v-if="$slots['right-side']" class="flex justify-end items-stretch flex-nowrap p-4">
-      <QSeparator v-if="$slots['default']" vertical class="mx-4 h-10 self-center" />
+    <div
+      v-if="$slots['right-side']"
+      class="flex justify-end items-stretch flex-nowrap p-4"
+    >
+      <QSeparator
+        v-if="$slots['default']"
+        vertical
+        class="mx-4 h-10 self-center"
+      />
       <slot name="right-side" />
     </div>
   </div>

package/src/components/ActionTable/Filters/FilterableField.vue

@@ -2,99 +2,104 @@
   <div>
     <template v-if="field.type === 'multi-select'">
       <SelectField
-          v-if="field.options?.length > 0 || loading"
-          :model-value="modelValue"
-          :options="field.options"
-          multiple
-          :loading="loading"
-          :chip-limit="1"
-          filterable
-          :placeholder="field.placeholder"
-          :label="field.label"
-          @update:model-value="onUpdate"
+        v-if="field.options?.length > 0 || loading"
+        :model-value="modelValue"
+        :options="field.options"
+        multiple
+        :loading="loading"
+        :chip-limit="1"
+        filterable
+        :placeholder="field.placeholder"
+        :label="field.label"
+        @update:model-value="onUpdate"
       />
       <div
-          v-else
-          class="mt-2"
+        v-else
+        class="mt-2"
       >
-        <div class="text-xs font-bold">{{ field.label }}</div>
-        <div class="text-sm ml-3 py-2">No Available Options</div>
+        <div class="text-xs font-bold">
+          {{ field.label }}
+        </div>
+        <div class="text-sm ml-3 py-2">
+          No Available Options
+        </div>
       </div>
     </template>
 
     <SelectField
-        v-else-if="field.type === 'single-select'"
-        :model-value="modelValue"
-        :options="field.options"
-        :placeholder="field.placeholder"
-        :loading="loading"
-        :label="field.label"
-        @update:model-value="onUpdate"
+      v-else-if="field.type === 'single-select'"
+      :model-value="modelValue"
+      :options="field.options"
+      :placeholder="field.placeholder"
+      :loading="loading"
+      :label="field.label"
+      @update:model-value="onUpdate"
     />
     <DateField
-        v-else-if="field.type === 'date'"
-        :model-value="modelValue"
-        :label="field.label"
-        class="mt-2"
-        @update:model-value="onUpdate"
+      v-else-if="field.type === 'date'"
+      :model-value="modelValue"
+      :label="field.label"
+      class="mt-2"
+      @update:model-value="onUpdate"
     />
     <DateRangeField
-        v-else-if="field.type === 'date-range'"
-        :model-value="modelValue"
-        :label="field.label"
-        :inline="field.inline"
-        with-time
-        class="mt-2 reactive"
-        @update:model-value="onUpdate"
+      v-else-if="field.type === 'date-range'"
+      :model-value="modelValue"
+      :label="field.label"
+      :inline="field.inline"
+      with-time
+      class="mt-2 reactive"
+      @update:model-value="onUpdate"
     />
     <NumberRangeField
-        v-else-if="field.type === 'number-range'"
-        :model-value="modelValue"
-        :label="field.label"
-        class="mt-2"
-        :debounce="1000"
-        @update:model-value="onUpdate"
+      v-else-if="field.type === 'number-range'"
+      :model-value="modelValue"
+      :label="field.label"
+      class="mt-2"
+      :debounce="1000"
+      @update:model-value="onUpdate"
     />
     <NumberRangeField
-        v-else-if="field.type === 'currency-range'"
-        :model-value="modelValue"
-        :label="field.label"
-        class="mt-2"
-        :debounce="1000"
-        currency
-        @update:model-value="onUpdate"
+      v-else-if="field.type === 'currency-range'"
+      :model-value="modelValue"
+      :label="field.label"
+      class="mt-2"
+      :debounce="1000"
+      currency
+      @update:model-value="onUpdate"
     />
     <NumberRangeField
-        v-else-if="field.type === 'percent-range'"
-        :model-value="modelValue"
-        :label="field.label"
-        class="mt-2"
-        :debounce="1000"
-        percent
-        @update:model-value="onUpdate"
+      v-else-if="field.type === 'percent-range'"
+      :model-value="modelValue"
+      :label="field.label"
+      class="mt-2"
+      :debounce="1000"
+      percent
+      @update:model-value="onUpdate"
     />
     <BooleanField
-        v-else-if="field.type === 'boolean'"
-        :field="field"
-        :model-value="modelValue"
-        class="mt-2"
-        label-class="text-xs font-bold"
-        @update:model-value="onUpdate"
+      v-else-if="field.type === 'boolean'"
+      :field="field"
+      :model-value="modelValue"
+      class="mt-2"
+      :toggle-indeterminate="field.toggleIndeterminate || false"
+      label-class="text-xs font-bold"
+      @update:model-value="onUpdate"
     />
     <MultiKeywordField
-        v-else-if="field.type === 'multi-keywords'"
-        :model-value="modelValue"
-        :field="field"
-        @update:model-value="onUpdate"
+      v-else-if="field.type === 'multi-keywords'"
+      :model-value="modelValue"
+      :field="field"
+      @update:model-value="onUpdate"
     />
     <SelectWithChildrenField
-        v-else-if="field.type === 'select-with-children'"
-        :model-value="modelValue"
-        :options="field.options"
-        :loading="loading"
-        :label="field.label"
-        :placeholder="field.placeholder"
-        @update:model-value="onUpdate"
+      v-else-if="field.type === 'select-with-children'"
+      :model-value="modelValue"
+      :options="field.options"
+      :loading="loading"
+      :label="field.label"
+      :placeholder="field.placeholder"
+      @update:model-value="onUpdate"
     />
     <template v-else>
       Field &quot;{{ field.name }}&quot;: Unknown filter type {{ field.type }}

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

@@ -1,16 +1,16 @@
 <template>
   <QToggle
-      :data-testid="'boolean-field-' + field.id"
-      :model-value="modelValue"
-      :disable="disable || readonly"
-      :toggle-indeterminate="toggleIndeterminate"
-      :indeterminate-value="undefined"
-      @update:model-value="$emit('update:model-value', $event)"
+    :data-testid="'boolean-field-' + field.id"
+    :model-value="modelValue || (toggleIndeterminate ? modelValue : false)"
+    :disable="disable || readonly"
+    :toggle-indeterminate="toggleIndeterminate"
+    :indeterminate-value="undefined"
+    @update:model-value="$emit('update:model-value', $event)"
   >
     <FieldLabel
-        :field="{...field, label}"
-        :show-name="showName"
-        :class="labelClass"
+      :field="{...field, label: label || field.label}"
+      :show-name="showName"
+      :class="labelClass"
     />
   </QToggle>
 </template>

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

@@ -1,11 +1,11 @@
 <template>
   <LabeledInput
-      type="password"
-      v-bind="props"
-      :name="name"
-      :model-value="modelValue"
-      :rules="rules"
-      @update:model-value="$emit('update:model-value', $event)"
+    type="password"
+    v-bind="props"
+    :name="name"
+    :model-value="modelValue"
+    :rules="rules"
+    @update:model-value="$emit('update:model-value', $event)"
   />
 </template>
 
@@ -43,6 +43,6 @@ const props = defineProps({
 
 const rules = [
   (val) =>
-      val === props.password || "The password and confirmation do not match"
+    val === props.password || "The password and confirmation do not match"
 ];
 </script>

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

@@ -1,8 +1,8 @@
 <template>
   <div>
     <div
-        v-if="label"
-        class="font-bold text-xs mb-2"
+      v-if="label"
+      class="font-bold text-xs mb-2"
     >
       {{ label }}
     </div>
@@ -19,8 +19,8 @@
     </div>
     <QPopupProxy>
       <QDate
-          v-model="date"
-          @update:model-value="onSave"
+        v-model="date"
+        @update:model-value="onSave"
       />
     </QPopupProxy>
   </div>

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

@@ -1,17 +1,14 @@
 <template>
   <div>
-    <div
-        v-if="label"
-        class="font-bold text-xs mb-2"
-    >
-      {{ label }}
+    <div class="mb-2">
+      <FieldLabel :label="label" />
     </div>
     <template v-if="inline">
       <QDate
-          v-model="dateRange"
-          range
-          class="reactive"
-          @update:model-value="onSave"
+        v-model="dateRange"
+        range
+        class="reactive"
+        @update:model-value="onSave"
       />
     </template>
     <template v-else>
@@ -28,9 +25,9 @@
       </div>
       <QPopupProxy>
         <QDate
-            v-model="dateRange"
-            range
-            @update:model-value="onSave"
+          v-model="dateRange"
+          range
+          @update:model-value="onSave"
         />
       </QPopupProxy>
     </template>
@@ -41,6 +38,7 @@
 import { CalendarIcon as DateIcon } from "@heroicons/vue/outline";
 import { computed, ref, watch } from "vue";
 import { fDate, parseQDate, parseQDateTime } from "../../../../helpers";
+import FieldLabel from "./FieldLabel";
 
 const emit = defineEmits(["update:model-value"]);
 const props = defineProps({

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

@@ -1,20 +1,23 @@
 <template>
   <div>
     <QInput
-        :model-value="fLocalizedDateTime(modelValue)"
-        :color="color"
-        class="bg-white rounded overflow-hidden px-2 w-48"
-        dense
-        readonly
-        @click="isShowing = true"
+      :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">
+        <QIcon
+          name="event"
+          class="cursor-pointer"
+        >
           <QPopupProxy v-model="isShowing">
             <DateTimePicker
-                v-model="dateTime"
-                @cancel="isShowing = false"
-                @save="onSave"
+              v-model="dateTime"
+              @cancel="isShowing = false"
+              @save="onSave"
             />
           </QPopupProxy>
         </QIcon>

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

@@ -1,28 +1,50 @@
 <template>
   <QPopupProxy
-      :model-value="true"
-      cover
-      transition-show="scale"
-      transition-hide="scale"
-      class="bg-transparent shadow-none flex items-stretch"
+    :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">
+    <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-600" flat @click="dateTime = null" />
+        <div
+          v-if="nullable"
+          class="flex-grow"
+        >
+          <QBtn
+            label="Clear"
+            color="blue-600"
+            flat
+            @click="dateTime = null"
+          />
         </div>
         <div>
           <QBtn
-              label="Cancel"
-              color="blue-600"
-              flat
-              @click="$emit('cancel')"
+            label="Cancel"
+            color="blue-600"
+            flat
+            @click="$emit('cancel')"
+          />
+          <QBtn
+            label="Set"
+            color="blue-600"
+            flat
+            @click="$emit('save')"
           />
-          <QBtn label="Set" color="blue-600" flat @click="$emit('save')" />
         </div>
       </div>
     </QDate>
-    <QTime v-model="dateTime" :mask="mask" :color="color" class="ml-3" />
+    <QTime
+      v-model="dateTime"
+      :mask="mask"
+      :color="color"
+      class="ml-3"
+    />
   </QPopupProxy>
 </template>
 <script setup>

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

@@ -1,8 +1,8 @@
 <template>
   <div
-      contenteditable
-      class="inline-block hover:bg-blue-200 focus:bg-blue-200 transition duration-300 outline-none"
-      @input="onInput"
+    contenteditable
+    class="inline-block hover:bg-blue-200 focus:bg-blue-200 transition duration-300 outline-none"
+    @input="onInput"
   >
     {{ text }}
   </div>

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

@@ -5,8 +5,8 @@
       <template v-if="showName">({{ field?.name }})</template>
     </slot>
     <span
-        v-if="requiredLabel"
-        class="text-red-900 ml-1 text-xs bottom-1 relative"
+      v-if="requiredLabel"
+      class="text-red-900 ml-1 text-xs bottom-1 relative"
     >{{ requiredLabel }}</span>
   </span>
 </template>

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

@@ -1,20 +1,23 @@
 <template>
-  <QBtn v-bind="$props" @click="$refs.fileUpload.click()">
+  <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"
-    />
+      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>
@@ -58,16 +61,16 @@ function upload() {
 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);
-      });
+    .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,22 +1,22 @@
 <template>
   <div class="inline-block">
     <div
-        class="cursor-pointer py-2 hover:bg-blue-200 flex items-center justify-end"
+      class="cursor-pointer py-2 hover:bg-blue-200 flex items-center justify-end"
     >
       {{ fLocalizedDateTime(modelValue, { empty: "Never" }) }}
       <EditIcon class="w-4 font-bold ml-2 text-gray-400" />
       <QPopupEdit
-          v-slot="scope"
-          :model-value="modelValue"
-          touch-position
-          :offset="[0, 20]"
-          class="bg-blue-600 text-white !min-w-0"
+        v-slot="scope"
+        :model-value="modelValue"
+        touch-position
+        :offset="[0, 20]"
+        class="bg-blue-600 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>
     </div>

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

@@ -1,10 +1,10 @@
 <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>
 
@@ -15,7 +15,7 @@ defineEmits(["update:model-value"]);
 defineProps({
   modelValue: {
     type: [String, Number],
-    required: true
+    default: null
   },
   field: {
     type: Object,

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

@@ -1,26 +1,29 @@
 <template>
   <div>
-    <label for="first_name" class="form-label">
+    <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)"
+        :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>