quasar-ui-danx 0.3.11 → 0.3.12

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-300': !readonly}"
-      @dragover.prevent
-      @drop.prevent="onDrop"
+    class="max-w-full relative overflow-auto"
+    :class="{'p-4 border rounded border-gray-300': !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-600"
-          @click="$refs.file.click()"
+        class="text-blue-600"
+        @click="$refs.file.click()"
       >Upload</a>
       <a
-          v-if="uploadedFiles.length > 0"
-          class="ml-3 text-red-900"
-          @click="clearUploadedFiles"
+        v-if="uploadedFiles.length > 0"
+        class="ml-3 text-red-900"
+        @click="clearUploadedFiles"
       >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">
       <FilePreview
-          v-for="file in uploadedFiles"
-          :key="'file-upload-' + file.id"
-          class="w-32 m-2 cursor-pointer bg-gray-200"
-          :class="{'border border-dashed border-blue-600': !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-gray-200"
+        :class="{'border border-dashed border-blue-600': !uploadedFiles.length}"
+        :image="file"
+        :related-files="uploadedFiles"
+        downloadable
+        :removable="!readonly && !disable"
+        @remove="onRemove(file)"
       />
       <FilePreview
-          v-if="!disable && !readonly"
-          class="w-32 m-2 cursor-pointer border border-dashed border-blue-600"
-          disabled
-          @click="$refs.file.click()"
+        v-if="!disable && !readonly"
+        class="w-32 m-2 cursor-pointer border border-dashed border-blue-600"
+        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>

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

@@ -1,23 +1,23 @@
 <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-zinc-800"
-        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-zinc-800"
+      parent-class="tight-label"
+      input-class="!py-0"
+      dense
+      type="textarea"
+      :debounce="500"
+      @update:model-value="onChange"
     />
   </div>
 </template>

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

@@ -1,9 +1,9 @@
 <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>
 

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

@@ -1,19 +1,19 @@
 <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 max-w-full': hidePrependLabel, 'prepend-label': !hidePrependLabel}"
-      @update:model-value="onInput"
+    :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 max-w-full': hidePrependLabel, 'prepend-label': !hidePrependLabel}"
+    @update:model-value="onInput"
   >
     <template #prepend>
       <FieldLabel
-          :field="fieldOptions"
-          :show-name="showName"
+        :field="fieldOptions"
+        :show-name="showName"
       />
     </template>
   </QInput>

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

@@ -1,15 +1,15 @@
 <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>
     <div class="flex items-center flex-nowrap cursor-pointer">
       <component
-          :is="previewIcon"
-          class="w-5 text-blue-600"
+        :is="previewIcon"
+        class="w-5 text-blue-600"
       />
       <div class="text-sm ml-3 hover:text-blue-600 whitespace-nowrap">
         <template v-if="range">
@@ -22,15 +22,15 @@
     </div>
     <QPopupProxy>
       <NumberField
-          v-model="range.from"
-          :field="minField"
-          @update:model-value="onSave"
+        v-model="range.from"
+        :field="minField"
+        @update:model-value="onSave"
       />
       <NumberField
-          v-model="range.to"
-          class="mt-2"
-          :field="maxField"
-          @update:model-value="onSave"
+        v-model="range.to"
+        class="mt-2"
+        :field="maxField"
+        @update:model-value="onSave"
       />
     </QPopupProxy>
   </div>

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

@@ -1,49 +1,52 @@
 <template>
   <div>
     <ContentDrawer
-        v-model:show="showDrawer"
-        content-class=""
-        position="bottom"
-        :title="'Filter ' + label"
+      v-model:show="showDrawer"
+      content-class=""
+      position="bottom"
+      :title="'Filter ' + label"
     >
       <div
-          v-for="option in formattedOptions"
-          :key="'select-drawer-' + option.value"
-          :data-dusk="'drawer-opt-' + option.value"
-          class="cursor-pointer hover:bg-slate-200 px-8 py-3 flex items-center border-b border-slate-200"
-          @click="toggleSelect(option)"
+        v-for="option in formattedOptions"
+        :key="'select-drawer-' + option.value"
+        :data-dusk="'drawer-opt-' + option.value"
+        class="cursor-pointer hover:bg-slate-200 px-8 py-3 flex items-center border-b border-slate-200"
+        @click="toggleSelect(option)"
       >
         <QCheckbox
-            @click.stop="toggleSelect(option)"
-            :model-value="isSelected(option)"
-            class="mr-2"
+          :model-value="isSelected(option)"
+          class="mr-2"
+          @click.stop="toggleSelect(option)"
         />
         <slot
-            name="option"
-            :opt="option"
-        >{{ option.label }}
+          name="option"
+          :opt="option"
+        >
+          {{ option.label }}
         </slot>
       </div>
     </ContentDrawer>
 
     <QChip
-        ref="select"
-        outline
-        clickable
-        size="16px"
-        @click="showDrawer = true"
+      ref="select"
+      outline
+      clickable
+      size="16px"
+      @click="showDrawer = true"
     >
       <slot name="selected">
-        <slot name="label">{{ label }}:&nbsp;</slot>
+        <slot name="label">
+          {{ label }}:&nbsp;
+        </slot>
         <template v-if="modelValue && modelValue.length > 0">
           <slot name="selection">
             <template v-if="multiple">
               {{ getOptionLabel(modelValue[0]) }}
               <template
-                  v-if="modelValue.length > 1"
-              >+ {{ modelValue.length - 1 }}
-              </template
+                v-if="modelValue.length > 1"
               >
+                + {{ modelValue.length - 1 }}
+              </template>
             </template>
             <template v-else>
               {{ getOptionLabel(modelValue) }}
@@ -51,7 +54,9 @@
           </slot>
         </template>
         <template v-else>
-          <slot name="placeholder">{{ placeholder }}</slot>
+          <slot name="placeholder">
+            {{ placeholder }}
+          </slot>
         </template>
       </slot>
     </QChip>
@@ -85,14 +90,14 @@ const props = defineProps({
 
 const showDrawer = ref(false);
 const formattedOptions = computed(() =>
-    props.options.map((opt) =>
-        typeof opt === "string"
-            ? {
-              label: opt,
-              value: opt
-            }
-            : opt
-    )
+  props.options.map((opt) =>
+    typeof opt === "string"
+      ? {
+        label: opt,
+        value: opt
+      }
+      : opt
+  )
 );
 
 function getOptionValue(option) {

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

@@ -1,50 +1,51 @@
 <template>
   <div>
     <QSelect
-        ref="selectField"
-        v-bind="$props"
-        :model-value="selectedValue"
-        outlined
-        hide-dropdown-icon
-        dense
-        emit-value
-        :use-input="filterable"
-        :hide-selected="filterable && isShowing && !$props.multiple"
-        :input-debounce="100"
-        :options="filteredOptions"
-        option-label="label"
-        option-value="value"
-        placeholder=""
-        :input-class="{'is-hidden': !isShowing, [inputClass]: true}"
-        class="max-w-full"
-        @filter="onFilter"
-        @clear="onClear"
-        @popup-show="onShow"
-        @popup-hide="onHide"
-        @update:model-value="onUpdate"
+      ref="selectField"
+      v-bind="$props"
+      :model-value="selectedValue"
+      outlined
+      hide-dropdown-icon
+      dense
+      emit-value
+      :use-input="filterable"
+      :hide-selected="filterable && isShowing && !$props.multiple"
+      :input-debounce="100"
+      :options="filteredOptions"
+      option-label="label"
+      option-value="value"
+      placeholder=""
+      :input-class="{'is-hidden': !isShowing, [inputClass]: true}"
+      class="max-w-full"
+      @filter="onFilter"
+      @clear="onClear"
+      @popup-show="onShow"
+      @popup-hide="onHide"
+      @update:model-value="onUpdate"
     >
       <template #append>
         <DropDownIcon
-            class="w-4 transition"
-            :class="isShowing ? 'rotate-180' : ''"
+          class="w-4 transition"
+          :class="isShowing ? 'rotate-180' : ''"
         />
       </template>
       <template #selected>
         <div
-            v-if="$props.multiple"
-            class="flex gap-y-1 overflow-hidden"
-            :class="{'flex-nowrap gap-y-0': chipLimit === 1, [selectionClass]: true}"
+          v-if="$props.multiple"
+          class="flex gap-y-1 overflow-hidden"
+          :class="{'flex-nowrap gap-y-0': chipLimit === 1, [selectionClass]: true}"
         >
           <template v-if="chipOptions.length > 0">
             <QChip
-                v-for="chipOption in chipOptions"
-                :key="'selected-' + chipOption.label"
-                class="!mr-1"
-            >{{ chipOption.label }}
+              v-for="chipOption in chipOptions"
+              :key="'selected-' + chipOption.label"
+              class="!mr-1"
+            >
+              {{ chipOption.label }}
             </QChip>
             <QChip
-                v-if="selectedOptions.length > chipOptions.length"
-                class="!mr-1"
+              v-if="selectedOptions.length > chipOptions.length"
+              class="!mr-1"
             >
               +{{ selectedOptions.length - chipOptions.length }}
             </QChip>
@@ -54,9 +55,10 @@
           </template>
         </div>
         <div
-            v-else
-            :class="selectionClass"
-        >{{ selectedLabel }}
+          v-else
+          :class="selectionClass"
+        >
+          {{ selectedLabel }}
         </div>
       </template>
     </QSelect>

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

@@ -1,28 +1,32 @@
 <template>
   <div>
     <template v-if="!loading && !options.length">
-      <div class="text-zinc-500">No options available</div>
+      <div class="text-zinc-500">
+        No options available
+      </div>
     </template>
     <SelectField
-        v-model="selectedOption"
-        :options="options"
-        :label="label"
-        :placeholder="placeholder"
-        :option-value="opt => opt"
-        :loading="loading"
-        @update:model-value="onSelectOption"
+      v-model="selectedOption"
+      :options="options"
+      :label="label"
+      :placeholder="placeholder"
+      :option-value="opt => opt"
+      :loading="loading"
+      @update:model-value="onSelectOption"
     />
     <div v-if="selectedOption">
       <QCheckbox
-          v-for="child in selectedOption.children"
-          :key="child.id"
-          :model-value="selectedChildren.includes(child.id)"
-          :field="child"
-          class="mt-3"
-          @update:model-value="onSelectChild(child)"
+        v-for="child in selectedOption.children"
+        :key="child.id"
+        :model-value="selectedChildren.includes(child.id)"
+        :field="child"
+        class="mt-3"
+        @update:model-value="onSelectChild(child)"
       >
         <div>{{ child.label }}</div>
-        <div class="text-xs text-zinc-500">{{ child.name }}</div>
+        <div class="text-xs text-zinc-500">
+          {{ child.name }}
+        </div>
       </QCheckbox>
     </div>
   </div>

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

@@ -1,48 +1,49 @@
 <template>
   <div
-      class="max-w-full relative overflow-auto"
-      :class="{'p-4 border rounded border-gray-300 text-center': !readonly}"
-      @dragover.prevent
-      @drop.prevent="onDrop"
+    class="max-w-full relative overflow-auto"
+    :class="{'p-4 border rounded border-gray-300 text-center': !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 mt-2"
+      v-if="!disable && !readonly"
+      class="text-sm mt-2"
     >
       <a
-          class="text-blue-600"
-          @click="$refs.file.click()"
+        class="text-blue-600"
+        @click="$refs.file.click()"
       >Upload</a>
       <a
-          v-if="uploadedFile"
-          class="ml-3 text-red-900"
-          @click="clearUploadedFile"
+        v-if="uploadedFile"
+        class="ml-3 text-red-900"
+        @click="clearUploadedFile"
       >Clear</a>
       <input
-          ref="file"
-          class="hidden"
-          type="file"
-          @change="onFileSelected"
-      />
+        ref="file"
+        class="hidden"
+        type="file"
+        @change="onFileSelected"
+      >
     </div>
 
     <FilePreview
-        v-if="!readonly || uploadedFile"
-        class="w-32 cursor-pointer mt-2"
-        :class="{'border border-dashed border-blue-600': !uploadedFile, 'mx-auto': !readonly}"
-        :image="uploadedFile"
-        downloadable
-        @click="!disable && $refs.file.click()"
+      v-if="!readonly || uploadedFile"
+      class="w-32 cursor-pointer mt-2"
+      :class="{'border border-dashed border-blue-600': !uploadedFile, 'mx-auto': !readonly}"
+      :image="uploadedFile"
+      downloadable
+      @click="!disable && $refs.file.click()"
     />
     <div
-        v-else-if="readonly"
-        class="py-1"
-    >--
+      v-else-if="readonly"
+      class="py-1"
+    >
+      --
     </div>
   </div>
 </template>

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

@@ -1,36 +1,36 @@
 <template>
   <div>
     <QInput
-        v-if="!readonly"
-        :data-dusk="'text-field-' + field?.id"
-        :data-testid="'text-field-' + field?.id"
-        :placeholder="field?.placeholder"
-        outlined
-        dense
-        :disable="disabled"
-        :label-slot="!noLabel"
-        :input-class="inputClass"
-        :class="parentClass"
-        stack-label
-        :type="type"
-        :model-value="modelValue"
-        :debounce="debounce"
-        @keydown.enter="$emit('submit')"
-        @update:model-value="$emit('update:model-value', $event)"
+      v-if="!readonly"
+      :data-dusk="'text-field-' + field?.id"
+      :data-testid="'text-field-' + field?.id"
+      :placeholder="field?.placeholder"
+      outlined
+      dense
+      :disable="disabled"
+      :label-slot="!noLabel"
+      :input-class="inputClass"
+      :class="parentClass"
+      stack-label
+      :type="type"
+      :model-value="modelValue"
+      :debounce="debounce"
+      @keydown.enter="$emit('submit')"
+      @update:model-value="$emit('update:model-value', $event)"
     >
       <template #label>
         <FieldLabel
-            :field="field"
-            :label="label"
-            :show-name="showName"
-            :class="labelClass"
+          :field="field"
+          :label="label"
+          :show-name="showName"
+          :class="labelClass"
         />
       </template>
     </QInput>
     <div v-if="readonly">
       <LabelValueBlock
-          :label="label || field.label"
-          :value="modelValue"
+        :label="label || field.label"
+        :value="modelValue"
       />
     </div>
   </div>

package/src/components/ActionTable/Form/RenderedForm.vue

@@ -137,6 +137,10 @@ const props = defineProps({
   disable: Boolean,
   readonly: Boolean,
   saving: Boolean,
+  emptyValue: {
+    type: [String, Number, Boolean],
+    default: undefined
+  },
   canModifyVariations: Boolean
 });
 
@@ -186,7 +190,7 @@ function onInput(name, value) {
   const newFieldResponse = {
     name,
     variation: currentVariation.value || "",
-    value
+    value: value === undefined ? props.emptyValue : value
   };
   const newValues = replace(props.values, fieldResponse, newFieldResponse, true);
   emit("update:values", newValues);