quasar-ui-danx 0.4.2 → 0.4.4

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

@@ -64,47 +64,33 @@
     </QSelect>
   </div>
 </template>
-<script setup>
+<script setup lang="ts">
 import { ChevronDownIcon as DropDownIcon } from "@heroicons/vue/outline";
-import { QSelect } from "quasar";
+import { QSelect, QSelectProps } from "quasar";
 import { computed, isRef, nextTick, ref } from "vue";
 
+export interface Props extends QSelectProps {
+	modelValue?: any;
+	placeholder?: string;
+	selectionLabel?: string | ((option) => string);
+	chipLimit?: number;
+	inputClass?: string;
+	selectionClass?: string;
+	options?: unknown[];
+	filterable?: boolean;
+	filterFn?: (val: string) => void;
+}
+
 const emit = defineEmits(["update:model-value", "search", "update"]);
-const props = defineProps({
-	...QSelect.props,
-	modelValue: {
-		type: [Array, String, Number, Object],
-		default: undefined
-	},
-	placeholder: {
-		type: String,
-		default: ""
-	},
-	selectionLabel: {
-		type: String,
-		default: null
-	},
-	chipLimit: {
-		type: Number,
-		default: 3
-	},
-	inputClass: {
-		type: String,
-		default: ""
-	},
-	selectionClass: {
-		type: String,
-		default: ""
-	},
-	options: {
-		type: Array,
-		default: () => []
-	},
-	filterable: Boolean,
-	filterFn: {
-		type: Function,
-		default: null
-	}
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: undefined,
+	placeholder: "",
+	selectionLabel: null,
+	chipLimit: 3,
+	inputClass: "",
+	selectionClass: "",
+	options: () => [],
+	filterFn: null
 });
 
 const selectField = ref(null);
@@ -136,7 +122,7 @@ const computedOptions = computed(() => {
 
 const filteredOptions = computed(() => {
 	if (filter.value && !props.filterFn) {
-		return computedOptions.value.filter(o => o.label.toLocaleLowerCase().indexOf(filter.value.toLowerCase()) > -1);
+		return computedOptions.value.filter(o => o.label.toLocaleLowerCase().indexOf(filter.value?.toLowerCase()) > -1);
 	} else {
 		return computedOptions.value;
 	}

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

@@ -31,55 +31,50 @@
     </div>
   </div>
 </template>
-<script setup>
+<script setup lang="ts">
 import { ref, watch } from "vue";
 import { remove } from "../../../../helpers";
 import SelectField from "./SelectField";
 
+export interface SelectWithChildrenFieldProps {
+	modelValue?: string[];
+	label?: string;
+	placeholder?: string;
+	options?: any[];
+	loading?: boolean;
+}
+
 const emit = defineEmits(["update:model-value"]);
-const props = defineProps({
-  modelValue: {
-    type: Array,
-    default: () => ([])
-  },
-  label: {
-    type: String,
-    default: "Selection"
-  },
-  placeholder: {
-    type: String,
-    default: "Select an option"
-  },
-  options: {
-    type: Array,
-    default: () => []
-  },
-  loading: Boolean
+const props = withDefaults(defineProps<SelectWithChildrenFieldProps>(), {
+	modelValue: () => [],
+	label: "Selection",
+	placeholder: "Select an option",
+	options: () => []
 });
 
 function resolveSelectedOption() {
-  if (props.modelValue?.length > 0) {
-    return props.options.find((option) => option.children.find(child => props.modelValue.includes(child.id)));
-  }
+	if (props.modelValue?.length > 0) {
+		return props.options.find((option) => option.children.find(child => props.modelValue.includes(child.id)));
+	}
 
-  return null;
+	return null;
 }
 const selectedOption = ref(resolveSelectedOption());
 const selectedChildren = ref(props.modelValue || []);
 function onSelectChild(child) {
-  if (selectedChildren.value.includes(child.id)) {
-    selectedChildren.value = remove(selectedChildren.value, child.id);
-  } else {
-    selectedChildren.value.push(child.id);
-  }
-  emit("update:model-value", selectedChildren.value.length > 0 ? selectedChildren.value : undefined);
+	if (selectedChildren.value.includes(child.id)) {
+		selectedChildren.value = remove(selectedChildren.value, child.id);
+	} else {
+		selectedChildren.value.push(child.id);
+	}
+	emit("update:model-value", selectedChildren.value.length > 0 ? selectedChildren.value : undefined);
 }
 function onSelectOption() {
-  selectedChildren.value = [];
-  emit("update:model-value", undefined);
+	selectedChildren.value = [];
+	emit("update:model-value", undefined);
 }
 watch(() => props.modelValue, (value) => {
-  selectedOption.value = resolveSelectedOption();
-  selectedChildren.value = value || [];
+	selectedOption.value = resolveSelectedOption();
+	selectedChildren.value = value || [];
 });
 </script>

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

@@ -35,7 +35,7 @@
       v-if="!readonly || uploadedFile"
       class="w-32 cursor-pointer mt-2"
       :class="{'border border-dashed border-blue-600': !uploadedFile, 'mx-auto': !readonly}"
-      :image="uploadedFile"
+      :file="uploadedFile"
       downloadable
       @click="!disable && $refs.file.click()"
     />
@@ -56,24 +56,24 @@ 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
+	modelValue: {
+		type: [Object, String],
+		default: null
+	},
+	field: {
+		type: Object,
+		required: true
+	},
+	showName: Boolean,
+	disable: Boolean,
+	readonly: Boolean
 });
 const { onComplete, onDrop, onFileSelected, uploadedFile, clearUploadedFile } = useSingleFileUpload();
 onComplete(() => emit("update:model-value", uploadedFile.value));
 
 onMounted(() => {
-  if (props.modelValue) {
-    uploadedFile.value = props.modelValue;
-  }
+	if (props.modelValue) {
+		uploadedFile.value = props.modelValue;
+	}
 });
 </script>

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

@@ -0,0 +1,45 @@
+<template>
+  <div class="dx-slider-number-field">
+    <FieldLabel
+      :label="label"
+      :field="field"
+    />
+    <QSlider
+      v-bind="sliderProps"
+      :min="min"
+      :max="max"
+      label
+      label-always
+      switch-label-side
+      :price-label="priceLabel"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { QSliderProps } from "quasar";
+import { computed } from "vue";
+import { FormField } from "../../../../types";
+import FieldLabel from "./FieldLabel";
+
+export interface SliderFieldProps extends QSliderProps {
+	modelValue?: number | null;
+	field?: FormField;
+	label?: string;
+	currency?: boolean;
+	percent?: boolean;
+}
+
+defineEmits(["update:model-value"]);
+const props = defineProps<SliderFieldProps>();
+const sliderProps = computed(() => ({ ...props, field: undefined, label: !!props.label }));
+const priceLabel = computed(() => {
+	if (props.currency) {
+		return "$" + props.modelValue;
+	} else if (props.percent) {
+		return props.modelValue + "%";
+	} else {
+		return props.modelValue;
+	}
+});
+</script>

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

@@ -1,82 +1,63 @@
 <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)"
-    >
-      <template #label>
-        <FieldLabel
-          :field="field"
-          :label="label"
-          :show-name="showName"
-          :class="labelClass"
-        />
-      </template>
-    </QInput>
     <div v-if="readonly">
       <LabelValueBlock
-        :label="label || field.label"
+        :label="label || field?.label || 'Text'"
         :value="modelValue"
       />
     </div>
+    <template v-else>
+      <QInput
+        :placeholder="field?.placeholder"
+        outlined
+        dense
+        :readonly="readonly"
+        :autogrow="autogrow"
+        :disable="disabled"
+        :label-slot="!noLabel"
+        :input-class="inputClass"
+        :class="parentClass"
+        stack-label
+        :type="type"
+        :model-value="modelValue"
+        :maxlength="allowOverMax ? undefined : field?.maxLength"
+        :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"
+          />
+        </template>
+      </QInput>
+      <MaxLengthCounter
+        :length="modelValue?.length || 0"
+        :max-length="field?.maxLength"
+      />
+    </template>
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { TextFieldProps } from "../../../../types";
+import MaxLengthCounter from "../Utilities/MaxLengthCounter";
 import FieldLabel from "./FieldLabel";
 import LabelValueBlock from "./LabelValueBlock";
 
 defineEmits(["update:model-value", "submit"]);
-defineProps({
-	modelValue: {
-		type: [String, Number],
-		default: ""
-	},
-	field: {
-		type: Object,
-		default: null
-	},
-	type: {
-		type: String,
-		default: "text"
-	},
-	label: {
-		type: String,
-		default: null
-	},
-	labelClass: {
-		type: String,
-		default: ""
-	},
-	parentClass: {
-		type: String,
-		default: ""
-	},
-	inputClass: {
-		type: String,
-		default: ""
-	},
-	noLabel: Boolean,
-	showName: Boolean,
-	disabled: Boolean,
-	readonly: Boolean,
-	debounce: {
-		type: [String, Number],
-		default: 0
-	}
+withDefaults(defineProps<TextFieldProps>(), {
+	modelValue: "",
+	field: null,
+	type: "text",
+	label: "",
+	labelClass: "",
+	parentClass: "",
+	inputClass: "",
+	maxLength: null,
+	debounce: 0
 });
 </script>

package/src/components/ActionTable/Form/Fields/index.ts

@@ -5,6 +5,7 @@ export { default as DateRangeField } from "./DateRangeField.vue";
 export { default as DateTimeField } from "./DateTimeField.vue";
 export { default as DateTimePicker } from "./DateTimePicker.vue";
 export { default as EditableDiv } from "./EditableDiv.vue";
+export { default as EditOnClickTextField } from "./EditOnClickTextField.vue";
 export { default as FieldLabel } from "./FieldLabel.vue";
 export { default as FileUploadButton } from "./FileUploadButton.vue";
 export { default as InlineDateTimeField } from "./InlineDateTimeField.vue";
@@ -20,5 +21,6 @@ export { default as SelectDrawer } from "./SelectDrawer.vue";
 export { default as SelectField } from "./SelectField.vue";
 export { default as SelectWithChildrenField } from "./SelectWithChildrenField.vue";
 export { default as SingleFileField } from "./SingleFileField.vue";
+export { default as SliderNumberField } from "./SliderNumberField.vue";
 export { default as TextField } from "./TextField.vue";
 export { default as WysiwygField } from "./WysiwygField.vue";

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="rendered-form">
+  <div class="dx-rendered-form">
     <div
       v-if="form.variations > 1"
       class="mb-4"
@@ -65,12 +65,13 @@
     <div
       v-for="(field, index) in mappedFields"
       :key="field.id"
-      :class="{ 'mt-4': index > 0 }"
+      :class="{ 'mt-4': index > 0, [fieldClass]: true }"
     >
       <RenderVnode
         v-if="field.vnode"
         :vnode="field.vnode"
-        :props="{field, modelValue: getFieldValue(field.name), readonly, disable, showName, noLabel}"
+        :field="field"
+        :props="getVnodeProps(field)"
         @update:model-value="onInput(field.name, $event)"
       />
       <Component
@@ -81,11 +82,31 @@
         :label="field.label || undefined"
         :no-label="noLabel"
         :show-name="showName"
+        :clearable="field.clearable || clearable"
         :disable="disable"
         :readonly="readonly"
         @update:model-value="onInput(field.name, $event)"
       />
     </div>
+    <div
+      v-if="savedAt"
+      :class="savingClass"
+      class="dx-saving-indicator flex items-center flex-nowrap"
+    >
+      <slot
+        v-if="saving"
+        name="saving"
+      >
+        Saving...
+        <QSpinnerPie class="ml-2" />
+      </slot>
+      <slot
+        v-else
+        name="saved"
+      >
+        Saved at {{ fDateTime(savedAt, { format: "M/d/yy h:mm:ssa" }) }}
+      </slot>
+    </div>
     <ConfirmDialog
       v-if="variationToEdit !== false"
       title="Change variation name"
@@ -113,8 +134,9 @@
 <script setup lang="ts">
 import { ExclamationCircleIcon as MissingIcon, PencilIcon as EditIcon } from "@heroicons/vue/solid";
 import { computed, ref } from "vue";
-import { FlashMessages, incrementName, replace } from "../../../helpers";
+import { fDateTime, FlashMessages, incrementName, replace } from "../../../helpers";
 import { TrashIcon as RemoveIcon } from "../../../svg";
+import { Form, FormFieldValue } from "../../../types";
 import { ConfirmDialog, RenderVnode } from "../../Utility";
 import {
 	BooleanField,
@@ -127,9 +149,8 @@ import {
 	TextField,
 	WysiwygField
 } from "./Fields";
-import { Form, FormFieldValue } from "./form.d.ts";
 
-export interface Props {
+export interface RenderedFormProps {
 	values?: FormFieldValue[] | object;
 	form: Form;
 	noLabel?: boolean;
@@ -137,13 +158,20 @@ export interface Props {
 	disable?: boolean;
 	readonly?: boolean;
 	saving?: boolean;
+	clearable?: boolean;
 	emptyValue?: string | number | boolean;
 	canModifyVariations?: boolean;
+	fieldClass?: string;
+	savingClass?: string;
+	savedAt?: string;
 }
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<RenderedFormProps>(), {
 	values: null,
-	emptyValue: undefined
+	emptyValue: undefined,
+	fieldClass: "",
+	savingClass: "text-sm text-slate-500 justify-end mt-4",
+	savedAt: null
 });
 
 const emit = defineEmits(["update:values"]);
@@ -172,6 +200,19 @@ const fieldResponses = computed(() => {
 	if (Array.isArray(props.values)) return props.values;
 	return Object.entries(props.values).map(([name, value]) => ({ name, value, variation: "" }));
 });
+
+function getVnodeProps(field) {
+	return {
+		modelValue: getFieldValue(field.name),
+		label: field.label,
+		clearable: field.clearable || props.clearable,
+		readonly: props.readonly,
+		disable: props.disable,
+		showName: props.showName,
+		noLabel: props.noLabel
+	};
+}
+
 const variationNames = computed(() => {
 	const names = [...new Set(fieldResponses.value.map(v => v.variation))].sort();
 	// Always guarantee that we show the default variation
@@ -183,7 +224,7 @@ const variationNames = computed(() => {
 
 const currentVariation = ref(variationNames.value[0] || "");
 const newVariationName = ref("");
-const variationToEdit = ref(false);
+const variationToEdit = ref<boolean | string>(false);
 const variationToDelete = ref("");
 const canAddVariation = computed(() => props.canModifyVariations && !props.readonly && !props.disable && variationNames.value.length < props.form.variations);
 

package/src/components/ActionTable/Form/Utilities/MaxLengthCounter.vue

@@ -0,0 +1,17 @@
+<template>
+  <div
+    v-if="maxLength"
+    class="danx-input-chars mt-1"
+    :class="{'danx-input-chars--error': length > maxLength}"
+  >
+    {{ fNumber(length) }} / {{ fNumber(maxLength) }} characters
+  </div>
+</template>
+<script setup lang="ts">
+import { fNumber } from "../../../../helpers";
+
+defineProps<{
+	length: number;
+	maxLength?: number;
+}>();
+</script>

package/src/components/ActionTable/Form/Utilities/index.ts

@@ -0,0 +1 @@
+export { default as MaxLengthCounter } from "./MaxLengthCounter.vue";

package/src/components/ActionTable/Form/index.ts

@@ -1,2 +1,3 @@
 export * from "./Fields";
+export * from "./Utilities";
 export { default as RenderedForm } from "./RenderedForm.vue";

package/src/components/ActionTable/Layouts/ActionTableLayout.vue

@@ -3,6 +3,7 @@
     <slot name="top" />
     <slot name="toolbar">
       <ActionToolbar
+        :title="title"
         :refresh-button="refreshButton"
         :actions="actions?.filter(a => a.batch)"
         :action-target="controller.selectedRows.value"
@@ -15,7 +16,7 @@
       </ActionToolbar>
     </slot>
     <div class="flex flex-nowrap flex-grow overflow-hidden w-full">
-      <slot name="filter-fields">
+      <slot name="filters">
         <CollapsableFiltersSidebar
           v-if="activeFilter"
           :name="controller.name"
@@ -48,6 +49,7 @@
           v-if="activeItem && panels"
           :title="panelTitle"
           :model-value="activePanel"
+          :active-item="activeItem"
           :panels="panels"
           @update:model-value="panel => controller.activatePanel(activeItem, panel)"
           @close="controller.setActiveItem(null)"
@@ -65,26 +67,25 @@
 </template>
 <script setup lang="ts">
 import { computed } from "vue";
-import { ActionOptions } from "../../../helpers";
+import { ActionController, ActionOptions, ActionPanel, FilterGroup, TableColumn } from "../../../types";
 import { PanelsDrawer } from "../../PanelsDrawer";
 import { PreviousNextControls } from "../../Utility";
 import ActionTable from "../ActionTable";
 import { CollapsableFiltersSidebar } from "../Filters";
-import { ActionController, ActionPanel, FilterGroup } from "../listControls";
-import { TableColumn } from "../tableColumns";
 import { ActionToolbar } from "../Toolbars";
 
 const props = defineProps<{
-	refreshButton: boolean,
-	showFilters: boolean,
-	controller: ActionController,
-	columns: TableColumn[],
-	filters?: FilterGroup[],
-	panels?: ActionPanel[],
-	actions?: ActionOptions[],
-	exporter?: () => Promise<void>,
-	titleField?: string,
-	tableClass?: string
+	title?: string;
+	refreshButton: boolean;
+	showFilters: boolean;
+	controller: ActionController;
+	columns: TableColumn[];
+	filters?: FilterGroup[];
+	panels?: ActionPanel[];
+	actions?: ActionOptions[];
+	exporter?: () => Promise<void>;
+	panelTitleField?: string;
+	tableClass?: string;
 }>();
 
 const activeFilter = computed(() => props.controller.activeFilter.value);
@@ -92,7 +93,7 @@ const activeItem = computed(() => props.controller.activeItem.value);
 const activePanel = computed(() => props.controller.activePanel.value || "");
 const panelTitle = computed(() => {
 	if (activeItem.value) {
-		return activeItem.value[props.titleField || "title"] || activeItem.value.label || activeItem.value.name;
+		return activeItem.value[props.panelTitleField || "title"] || activeItem.value.label || activeItem.value.name || (props.title + " " + activeItem.value.id);
 	}
 	return null;
 });

package/src/components/ActionTable/Toolbars/ActionToolbar.vue

@@ -2,9 +2,9 @@
   <div class="dx-action-toolbar flex items-center">
     <div class="flex-grow px-6">
       <slot name="title">
-        <h2 v-if="title">
+        <h4 v-if="title">
           {{ title }}
-        </h2>
+        </h4>
       </slot>
     </div>
     <div class="py-3 px-6 flex items-center flex-nowrap">
@@ -20,7 +20,7 @@
         class="ml-4"
       />
       <ActionMenu
-        v-if="actions.length > 0"
+        v-if="actions && actions.length > 0"
         class="ml-4 dx-batch-actions"
         :target="actionTarget"
         :actions="actions"
@@ -30,17 +30,17 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ActionOptions, ActionTargetItem } from "../../../helpers";
+import { ActionOptions, ActionTargetItem, AnyObject } from "../../../types";
 import { ExportButton, RefreshButton } from "../../Utility";
 import ActionMenu from "../ActionMenu";
 
 defineEmits(["refresh"]);
 defineProps<{
 	title?: string,
-	actions: ActionOptions[],
+	actions?: ActionOptions[],
 	actionTarget?: ActionTargetItem[],
 	refreshButton?: boolean,
 	loading?: boolean,
-	exporter?: () => void
+	exporter?: (filter?: AnyObject) => void | Promise<void>
 }>();
 </script>