quasar-ui-danx 0.3.22 → 0.4.1

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

@@ -67,6 +67,16 @@
       :key="field.id"
       :class="{ 'mt-4': index > 0 }"
     >
+      <RenderVnode
+        v-if="field.vnode"
+        :vnode="field.vnode"
+        :readonly="readonly"
+        :disable="disable"
+        :show-name="showName"
+        :no-label="noLabel"
+        :model-value="getFieldValue(field.name)"
+        @update:model-value="onInput(field.name, $event)"
+      />
       <Component
         :is="field.component"
         :key="field.name + '-' + currentVariation"
@@ -104,72 +114,75 @@
     />
   </div>
 </template>
-<script setup>
+<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 { TrashIcon as RemoveIcon } from "../../../svg";
-import { ConfirmDialog } from "../../Utility";
+import { ConfirmDialog, RenderVnode } from "../../Utility";
 import {
-  BooleanField,
-  DateField,
-  DateRangeField,
-  IntegerField,
-  MultiFileField,
-  NumberField,
-  SingleFileField,
-  TextField,
-  WysiwygField
+	BooleanField,
+	DateField,
+	DateRangeField,
+	IntegerField,
+	MultiFileField,
+	NumberField,
+	SingleFileField,
+	TextField,
+	WysiwygField
 } from "./Fields";
+import { Form, FormFieldValue } from "./form.d.ts";
 
-const emit = defineEmits(["update:values"]);
-const props = defineProps({
-  values: {
-    type: Array,
-    default: null
-  },
-  form: {
-    type: Object,
-    required: true
-  },
-  noLabel: Boolean,
-  showName: Boolean,
-  disable: Boolean,
-  readonly: Boolean,
-  saving: Boolean,
-  emptyValue: {
-    type: [String, Number, Boolean],
-    default: undefined
-  },
-  canModifyVariations: Boolean
+export interface Props {
+	values?: FormFieldValue[] | object;
+	form: Form;
+	noLabel?: boolean;
+	showName?: boolean;
+	disable?: boolean;
+	readonly?: boolean;
+	saving?: boolean;
+	emptyValue?: string | number | boolean;
+	canModifyVariations?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	values: null,
+	emptyValue: undefined
 });
 
+const emit = defineEmits(["update:values"]);
+
 const FORM_FIELD_MAP = {
-  BOOLEAN: BooleanField,
-  DATE: DateField,
-  DATE_RANGE: DateRangeField,
-  INTEGER: IntegerField,
-  NUMBER: NumberField,
-  TEXT: TextField,
-  SINGLE_FILE: SingleFileField,
-  MULTI_FILE: MultiFileField,
-  WYSIWYG: WysiwygField
+	BOOLEAN: BooleanField,
+	DATE: DateField,
+	DATE_RANGE: DateRangeField,
+	INTEGER: IntegerField,
+	NUMBER: NumberField,
+	TEXT: TextField,
+	SINGLE_FILE: SingleFileField,
+	MULTI_FILE: MultiFileField,
+	WYSIWYG: WysiwygField
 };
 
 const mappedFields = props.form.fields.map((field) => ({
-  placeholder: `Enter ${field.label}`,
-  ...field,
-  component: FORM_FIELD_MAP[field.type],
-  default: field.type === "BOOLEAN" ? false : ""
+	placeholder: `Enter ${field.label}`,
+	...field,
+	component: field.component || FORM_FIELD_MAP[field.type],
+	default: field.type === "BOOLEAN" ? false : ""
 }));
 
+const fieldResponses = computed(() => {
+	if (!props.values) return [];
+	if (Array.isArray(props.values)) return props.values;
+	return Object.entries(props.values).map(([name, value]) => ({ name, value, variation: "" }));
+});
 const variationNames = computed(() => {
-  const names = [...new Set(props.values.map(v => v.variation))].sort();
-  // Always guarantee that we show the default variation
-  if (names.length === 0) {
-    names.push("");
-  }
-  return names;
+	const names = [...new Set(fieldResponses.value.map(v => v.variation))].sort();
+	// Always guarantee that we show the default variation
+	if (names.length === 0) {
+		names.push("");
+	}
+	return names;
 });
 
 const currentVariation = ref(variationNames.value[0] || "");
@@ -178,89 +191,101 @@ const variationToEdit = ref(false);
 const variationToDelete = ref("");
 const canAddVariation = computed(() => props.canModifyVariations && !props.readonly && !props.disable && variationNames.value.length < props.form.variations);
 
-function getFieldResponse(name, variation) {
-  if (!props.values) return undefined;
-  return props.values.find((v) => v.variation === (variation !== undefined ? variation : currentVariation.value) && v.name === name);
+function getFieldResponse(name, variation: string = undefined) {
+	if (!fieldResponses.value) return undefined;
+	return fieldResponses.value.find((fr: FormFieldValue) => fr.variation === (variation !== undefined ? variation : currentVariation.value) && fr.name === name);
 }
 function getFieldValue(name) {
-  return getFieldResponse(name)?.value;
+	return getFieldResponse(name)?.value;
 }
 function onInput(name, value) {
-  const fieldResponse = getFieldResponse(name);
-  const newFieldResponse = {
-    name,
-    variation: currentVariation.value || "",
-    value: value === undefined ? props.emptyValue : value
-  };
-  const newValues = replace(props.values, fieldResponse, newFieldResponse, true);
-  emit("update:values", newValues);
+	const fieldResponse = getFieldResponse(name);
+	const newFieldResponse = {
+		name,
+		variation: currentVariation.value || "",
+		value: value === undefined ? props.emptyValue : value
+	};
+	const newValues = replace(fieldResponses.value, fieldResponse, newFieldResponse, true);
+	updateValues(newValues);
 }
 
 function createVariation(variation) {
-  return props.form.fields.map((field) => ({
-    variation,
-    name: field.name,
-    value: field.type === "BOOLEAN" ? false : null
-  }));
+	return props.form.fields.map((field) => ({
+		variation,
+		name: field.name,
+		value: field.type === "BOOLEAN" ? false : null
+	}));
 }
 
 function onAddVariation() {
-  if (props.saving) return;
-  let newValues = [...props.values];
+	if (props.saving) return;
+	let newValues = [...fieldResponses.value];
 
-  if (newValues.length === 0) {
-    newValues = createVariation("");
-  }
-  const previousName = variationNames.value[variationNames.value.length - 1];
-  const newName = incrementName(!previousName ? "1" : previousName);
-  const newVariation = createVariation(newName);
-  emit("update:values", [...newValues, ...newVariation]);
-  currentVariation.value = newName;
+	if (newValues.length === 0) {
+		newValues = createVariation("");
+	}
+	const previousName = variationNames.value[variationNames.value.length - 1];
+	const newName = incrementName(!previousName ? "1" : previousName);
+	const newVariation = createVariation(newName);
+	updateValues([...newValues, ...newVariation]);
+	currentVariation.value = newName;
 }
 
 function onChangeVariationName() {
-  if (!newVariationName.value) return;
-  if (variationNames.value.includes(newVariationName.value)) {
-    FlashMessages.error("Variation name already exists");
-    return;
-  }
-  const newValues = props.values.map((v) => {
-    if (v.variation === variationToEdit.value) {
-      return { ...v, variation: newVariationName.value };
-    }
-    return v;
-  });
-  emit("update:values", newValues);
+	if (!newVariationName.value) return;
+	if (variationNames.value.includes(newVariationName.value)) {
+		FlashMessages.error("Variation name already exists");
+		return;
+	}
+	const newValues = fieldResponses.value.map((v) => {
+		if (v.variation === variationToEdit.value) {
+			return { ...v, variation: newVariationName.value };
+		}
+		return v;
+	});
+	updateValues(newValues);
+
+	currentVariation.value = newVariationName.value;
+	variationToEdit.value = false;
+	newVariationName.value = "";
+}
+
+function updateValues(values: FormFieldValue[]) {
+	let updatedValues: FormFieldValue[] | object = values;
 
-  currentVariation.value = newVariationName.value;
-  variationToEdit.value = false;
-  newVariationName.value = "";
+	if (!Array.isArray(props.values)) {
+		updatedValues = values.reduce((acc, v) => {
+			acc[v.name] = v.value;
+			return acc;
+		}, {});
+	}
+	emit("update:values", updatedValues);
 }
 
-function onRemoveVariation(name) {
-  if (!name) return;
+function onRemoveVariation(name: string) {
+	if (!name) return;
 
-  const newValues = props.values.filter((v) => v.variation !== name);
-  emit("update:values", newValues);
+	const newValues = fieldResponses.value.filter((v) => v.variation !== name);
+	updateValues(newValues);
 
-  if (currentVariation.value === name) {
-    currentVariation.value = variationNames.value[0];
-  }
-  variationToDelete.value = "";
+	if (currentVariation.value === name) {
+		currentVariation.value = variationNames.value[0];
+	}
+	variationToDelete.value = "";
 }
 
 function isVariationFormComplete(variation) {
-  const requiredGroups = {};
-  return props.form.fields.filter(r => r.required || r.required_group).every((field) => {
-    const fieldResponse = getFieldResponse(field.name, variation);
-    const hasValue = !!fieldResponse && fieldResponse.value !== null;
-    if (field.required_group) {
-      // This required group has already been satisfied
-      if (requiredGroups[field.required_group]) return true;
-      return requiredGroups[field.required_group] = hasValue;
-    } else {
-      return hasValue;
-    }
-  });
+	const requiredGroups = {};
+	return props.form.fields.filter(r => r.required || r.required_group).every((field) => {
+		const fieldResponse = getFieldResponse(field.name, variation);
+		const hasValue = !!fieldResponse && fieldResponse.value !== null;
+		if (field.required_group) {
+			// This required group has already been satisfied
+			if (requiredGroups[field.required_group]) return true;
+			return requiredGroups[field.required_group] = hasValue;
+		} else {
+			return hasValue;
+		}
+	});
 }
 </script>

package/src/components/ActionTable/Form/form.d.ts

@@ -0,0 +1,31 @@
+import { VNode } from "vue";
+
+export interface FormFieldOption {
+	value: string;
+	label: string;
+}
+
+export interface FormField {
+	id?: string;
+	type?: string;
+	name: string;
+	label: string;
+	vnode?: ((props) => VNode | any);
+	component?: any;
+	required?: boolean;
+	required_group?: string;
+	options?: FormFieldOption[];
+}
+
+export interface Form {
+	id?: string;
+	name?: string;
+	variations?: number;
+	fields: FormField[];
+}
+
+export interface FormFieldValue {
+	name: string,
+	value: any,
+	variation?: string
+}

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

@@ -1,10 +1,94 @@
 <template>
-  <div class="flex flex-grow flex-col flex-nowrap overflow-hidden h-full bg-white">
+  <div class="flex flex-grow flex-col flex-nowrap overflow-hidden h-full">
     <slot name="top" />
-    <slot name="toolbar" />
+    <slot name="toolbar">
+      <ActionToolbar
+        :refresh-button="refreshButton"
+        :actions="actions?.filter(a => a.batch)"
+        :action-target="controller.selectedRows.value"
+        :exporter="controller.exportList"
+        @refresh="controller.refreshAll"
+      />
+    </slot>
     <div class="flex flex-nowrap flex-grow overflow-hidden w-full">
-      <slot name="filters" />
-      <slot />
+      <slot name="filter-fields">
+        <CollapsableFiltersSidebar
+          v-if="activeFilter"
+          :name="controller.name"
+          :show-filters="showFilters"
+          :filters="filters"
+          :active-filter="activeFilter"
+          @update:active-filter="controller.setActiveFilter"
+        />
+      </slot>
+      <slot>
+        <ActionTable
+          class="flex-grow"
+          :pagination="controller.pagination.value"
+          :selected-rows="controller.selectedRows.value"
+          :label="controller.label"
+          :name="controller.name"
+          :class="tableClass"
+          :summary="controller.summary.value"
+          :loading-list="controller.isLoadingList.value"
+          :loading-summary="controller.isLoadingSummary.value"
+          :paged-items="controller.pagedItems.value"
+          :columns="columns"
+          @update:selected-rows="controller.setSelectedRows"
+          @update:pagination="controller.setPagination"
+        />
+      </slot>
+      <slot name="panels">
+        <PanelsDrawer
+          v-if="activeItem && panels"
+          :title="panelTitle"
+          :model-value="activePanel"
+          :panels="panels"
+          @update:model-value="panel => controller.activatePanel(activeItem, panel)"
+          @close="controller.setActiveItem(null)"
+        >
+          <template #controls>
+            <PreviousNextControls
+              :is-loading="controller.isLoadingList.value"
+              @next="controller.getNextItem"
+            />
+          </template>
+        </PanelsDrawer>
+      </slot>
     </div>
   </div>
 </template>
+<script setup lang="ts">
+import { computed } from "vue";
+import { ActionOptions } from "../../../helpers";
+import { PanelsDrawer } from "../../PanelsDrawer";
+import { PreviousNextControls } from "../../Utility";
+import ActionTable from "../ActionTable";
+import { CollapsableFiltersSidebar } from "../Filters";
+import { ActionController, ActionPanel, FilterField } from "../listControls";
+import { TableColumn } from "../tableColumns";
+import { ActionToolbar } from "../Toolbars";
+
+const props = defineProps<{
+	refreshButton: boolean,
+	showFilters: boolean,
+	controller: ActionController,
+	columns: TableColumn[],
+	filters?: FilterField[],
+	panels?: ActionPanel[],
+	actions?: ActionOptions[],
+	exporter?: () => Promise<void>,
+	titleField?: string,
+	tableClass?: string
+}>();
+
+const activeFilter = computed(() => props.controller.activeFilter.value);
+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 null;
+});
+</script>

package/src/components/ActionTable/TableSummaryRow.vue

@@ -1,12 +1,12 @@
 <template>
   <QTr
-    class="sticky-column-1 transition-all sticky-row"
-    :class="{'!bg-gray-100': !selectedCount, '!bg-blue-600 text-white selected': selectedCount, 'opacity-50': loading}"
+    class="dx-table-summary-tr sticky-column-1 transition-all sticky-row"
+    :class="{'has-selection': selectedCount, 'is-loading': loading}"
   >
     <QTd
       :colspan="stickyColspan"
-      class="font-bold transition-all"
-      :class="{'!bg-gray-100 !pl-5': !selectedCount, '!bg-blue-600 text-white !pl-4': selectedCount}"
+      class="dx-table-summary-td transition-all"
+      :class="{'has-selection': selectedCount}"
     >
       <div class="flex flex-nowrap items-center">
         <div

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

@@ -0,0 +1,46 @@
+<template>
+  <div class="flex items-center">
+    <div class="flex-grow px-6">
+      <slot name="title">
+        <h2 v-if="title">
+          {{ title }}
+        </h2>
+      </slot>
+    </div>
+    <div class="py-3 px-6 flex items-center flex-nowrap">
+      <slot />
+      <RefreshButton
+        v-if="refreshButton"
+        :loading="loading"
+        @click="$emit('refresh')"
+      />
+      <ExportButton
+        v-if="exporter"
+        :exporter="exporter"
+        class="ml-4"
+      />
+      <ActionMenu
+        v-if="actions.length > 0"
+        class="ml-4 dx-batch-actions"
+        :target="actionTarget"
+        :actions="actions"
+      />
+      <slot name="after" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ActionOptions, ActionTargetItem } from "../../../helpers";
+import { ExportButton, RefreshButton } from "../../Utility";
+import ActionMenu from "../ActionMenu";
+
+defineEmits(["refresh"]);
+defineProps<{
+  title?: string,
+  actions: ActionOptions[],
+  actionTarget?: ActionTargetItem[],
+  refreshButton?: boolean,
+  loading?: boolean,
+  exporter?: () => void
+}>();
+</script>

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

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

package/src/components/ActionTable/index.ts

@@ -5,9 +5,8 @@ export * from "./Layouts";
 export * from "./listControls";
 export * from "./listHelpers";
 export * from "./tableColumns";
+export * from "./Toolbars";
 export { default as ActionMenu } from "./ActionMenu.vue";
 export { default as ActionTable } from "./ActionTable.vue";
-export { default as ActionTableColumn } from "./ActionTableColumn.vue";
-export { default as ActionTableHeaderColumn } from "./ActionTableHeaderColumn.vue";
 export { default as EmptyTableState } from "./EmptyTableState.vue";
 export { default as TableSummaryRow } from "./TableSummaryRow.vue";