quasar-ui-danx 0.0.10 → 0.0.11

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

@@ -0,0 +1,318 @@
+<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"
+    >
+      <template #append>
+        <DropDownIcon
+          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}"
+        >
+          <template v-if="chipOptions.length > 0">
+            <QChip
+              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"
+            >
+              +{{ selectedOptions.length - chipOptions.length }}
+            </QChip>
+          </template>
+          <template v-else>
+            {{ placeholder }}
+          </template>
+        </div>
+        <div
+          v-else
+          :class="selectionClass"
+        >{{ selectedLabel }}
+        </div>
+      </template>
+    </QSelect>
+  </div>
+</template>
+<script setup>
+import { ChevronDownIcon as DropDownIcon } from "@heroicons/vue/outline";
+import { QSelect } from "quasar";
+import { computed, isRef, nextTick, ref } from "vue";
+
+const emit = defineEmits(["update:model-value", "search"]);
+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 selectField = ref(null);
+
+// The filter applied to the dropdown list of options
+const filter = ref(null);
+// Is showing the dropdown list
+const isShowing = ref(false);
+
+/**
+ * The options formatted so each has a label, value and selectionLabel
+ * @type {ComputedRef<{selectionLabel: string, label: string, value: string|*}[]>}
+ */
+const computedOptions = computed(() => {
+  let options = props.options;
+  if (props.placeholder && !props.multiple && !props.filterable) {
+    options = [{ label: props.placeholder, value: null }, ...props.options];
+  }
+  options = options.map((o) => {
+    let opt = isRef(o) ? o.value : o;
+    return {
+      label: resolveLabel(opt),
+      value: resolveValue(opt),
+      selectionLabel: resolveSelectionLabel(opt)
+    };
+  });
+  return options;
+});
+
+const filteredOptions = computed(() => {
+  if (filter.value && !props.filterFn) {
+    return computedOptions.value.filter(o => o.label.toLocaleLowerCase().indexOf(filter.value.toLowerCase()) > -1);
+  } else {
+    return computedOptions.value;
+  }
+});
+
+/**
+ * The value selected. Basically a wrapper to better handle null values (see onUpdate function for more details)
+ * @type {ComputedRef<unknown>}
+ */
+const selectedValue = computed(() => {
+  if (props.multiple) {
+    const arrVal = Array.isArray(props.modelValue) ? props.modelValue : [];
+    return arrVal.map((v) => {
+      return v === null ? "__null__" : v;
+    }) || [];
+  } else {
+    return props.modelValue === null ? "__null__" : props.modelValue;
+  }
+});
+
+/**
+ * The selected options. The list of options from the computedOptions list that are selected as defined by the modelValue
+ * @type {ComputedRef<*>}
+ */
+const selectedOptions = computed(() => {
+  let values = selectedValue.value;
+  if (!props.multiple) {
+    values = (values || values === 0) ? [values] : [];
+  }
+  return computedOptions.value.filter((o) => {
+    return values.includes(o.value) || values.map(v => typeof v === "object" && v.id).includes(o.value?.id);
+  });
+});
+
+/**
+ * The label to display in the input field of the dropdown for a selected state, non-selected state or an active filtering state.
+ * NOTE: Only applies to single select (not multiselect)
+ * @type {ComputedRef<unknown>}
+ */
+const selectedLabel = computed(() => {
+  if (props.filterable && isShowing.value) return "";
+
+  if (!selectedOptions.value || selectedOptions.value.length === 0) {
+    return props.placeholder || "(Select Option)";
+  }
+  return selectedOptions.value[0].selectionLabel;
+});
+
+/**
+ * The options to display as chips (limited by chipLimit prop)
+ * @type {ComputedRef<*>}
+ */
+const chipOptions = computed(() => {
+  return selectedOptions.value.slice(0, props.chipLimit);
+});
+
+/**
+ * Resolve the label of the option. This will display as the text in the dropdown list
+ * @param option
+ * @returns {*|string}
+ */
+function resolveLabel(option) {
+  if (typeof option === "string") {
+    return option;
+  }
+  if (typeof props.optionLabel === "string") {
+    return option[props.optionLabel];
+  }
+  if (typeof props.optionLabel === "function") {
+    return props.optionLabel(option);
+  }
+  return option?.label;
+}
+
+/**
+ * Resolve the label to display in the input field of the dropdown when an option is selected
+ * NOTE: Does not apply to multiselect, single select only
+ * @param option
+ * @returns {*|{default: null, type: String | StringConstructor}|string}
+ */
+function resolveSelectionLabel(option) {
+  if (typeof option === "string") {
+    return option;
+  }
+  if (typeof props.selectionLabel === "string") {
+    return option[props.selectionLabel];
+  }
+  if (typeof props.selectionLabel === "function") {
+    return props.selectionLabel(option);
+  }
+  return option?.selectionLabel || option?.label;
+}
+
+/**
+ * Resolve the value of the option using either defaults or the provided optionValue prop
+ * @param option
+ * @returns {string|*|string}
+ */
+function resolveValue(option) {
+  if (typeof option === "string") {
+    return option;
+  }
+  let value = option.value;
+  if (typeof props.optionValue === "string") {
+    value = option[props.optionValue];
+  } else if (typeof props.optionValue === "function") {
+    value = props.optionValue(option);
+  }
+  // Note the __null__ special case here. See the onUpdate function for more details
+  return value === null ? "__null__" : value;
+}
+
+/**
+ * Handle the update event from the QSelect
+ * NOTE: casts all null values as a special __null__ string as the null character is handled the same as undefined by QSelect.
+ * SelectField differentiates between these 2 to provide a null value selected state vs undefined is no value selected.
+ * @param value
+ */
+function onUpdate(value) {
+  if (Array.isArray(value)) {
+    value = value.map((v) => v === "__null__" ? null : v);
+  }
+  emit("update:model-value", value === "__null__" ? null : value);
+}
+
+/** XXX: This tells us when we should apply the filter. QSelect likes to trigger a new filter everytime you open the dropdown
+ *       But most of the time when you open the dropdown it is already filtered and annoying to try and clear the previous filter
+ **/
+const shouldFilter = ref(false);
+
+/**
+ * Filter the options list. Do this asynchronously for the update so that the QSelect can update its internal state first, then update SelectField
+ * @param val
+ * @param update
+ */
+async function onFilter(val, update) {
+  if (!props.filterFn) {
+    filter.value = val;
+    await nextTick(update);
+  } else {
+    update();
+    if (shouldFilter.value === false) return;
+    if (val !== null && val !== filter.value) {
+      filter.value = val;
+      if (props.filterFn) {
+        await props.filterFn(val);
+      }
+    }
+  }
+}
+
+/**
+ * Clear the selected value using undefined. SelectField differentiates between null and undefined.
+ * See the onUpdate function for more details
+ */
+function onClear() {
+  emit("update:model-value", undefined);
+}
+
+/**
+ * Handle behavior when showing the dropdown
+ */
+function onShow() {
+  isShowing.value = true;
+
+  // XXX: See description on shouldFilter declaration. Only allow filtering after dropdown is ALREADY opened
+  shouldFilter.value = false;
+  nextTick(() => {
+    shouldFilter.value = true;
+    selectField.value.focus();
+  });
+}
+
+/**
+ * Handle behavior when hiding the dropdown
+ */
+function onHide() {
+  isShowing.value = false;
+  shouldFilter.value = false;
+}
+</script>

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

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <template v-if="!loading && !options.length">
+      <div class="text-gray-silver">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"
+    />
+    <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)"
+      >
+        <div>{{ child.label }}</div>
+        <div class="text-xs text-gray-silver">{{ child.name }}</div>
+      </QCheckbox>
+    </div>
+  </div>
+</template>
+<script setup>
+import SelectField from "danx/src/components/ActionTable/Form/Fields/SelectField";
+import { remove } from "danx/src/helpers/array";
+import { ref, watch } from "vue";
+
+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
+});
+
+function resolveSelectedOption() {
+  if (props.modelValue?.length > 0) {
+    return props.options.find((option) => option.children.find(child => props.modelValue.includes(child.id)));
+  }
+
+  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);
+}
+function onSelectOption() {
+  selectedChildren.value = [];
+  emit("update:model-value", undefined);
+}
+watch(() => props.modelValue, (value) => {
+  selectedOption.value = resolveSelectedOption();
+  selectedChildren.value = value || [];
+});
+</script>

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

@@ -0,0 +1,78 @@
+<template>
+  <div
+    class="max-w-full relative overflow-auto"
+    :class="{'p-4 border rounded border-gray-medium text-center': !readonly}"
+    @dragover.prevent
+    @drop.prevent="onDrop"
+  >
+    <FieldLabel
+      :field="field"
+      :show-name="showName"
+      class="text-sm font-semibold"
+    />
+    <div
+      v-if="!disable && !readonly"
+      class="text-sm mt-2"
+    >
+      <a
+        class="text-blue-base"
+        @click="$refs.file.click()"
+      >Upload</a>
+      <a
+        v-if="uploadedFile"
+        class="ml-3 text-red-dark"
+        @click="onClear"
+      >Clear</a>
+      <input
+        ref="file"
+        class="hidden"
+        type="file"
+        @change="onFileSelected"
+      />
+    </div>
+
+    <ImagePreview
+      v-if="!readonly || uploadedFile"
+      class="w-32 cursor-pointer mt-2"
+      :class="{'border border-dashed border-blue-base': !uploadedFile, 'mx-auto': !readonly}"
+      :image="uploadedFile"
+      downloadable
+      @click="!disable && $refs.file.click()"
+    />
+    <div
+      v-else-if="readonly"
+      class="py-1"
+    >--
+    </div>
+  </div>
+</template>
+
+<script setup>
+import ImagePreview from "components/Common/ImagePreview";
+import FieldLabel from "danx/src/components/ActionTable/Form/Fields/FieldLabel";
+import { useSingleFileUpload } from "src/helpers/singleFileUpload";
+import { onMounted } from "vue";
+
+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
+});
+const { onComplete, onDrop, onFileSelected, uploadedFile, onClear } = useSingleFileUpload();
+onComplete(() => emit("update:model-value", uploadedFile.value));
+
+onMounted(() => {
+  if (props.modelValue) {
+    uploadedFile.value = props.modelValue;
+  }
+});
+</script>

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

@@ -0,0 +1,82 @@
+<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"
+        :value="modelValue"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import LabelValueBlock from "components/Common/LabelValueBlock";
+import FieldLabel from "danx/src/components/ActionTable/Form/Fields/FieldLabel";
+
+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: "text-sm text-gray-shadow"
+  },
+  parentClass: {
+    type: String,
+    default: ""
+  },
+  inputClass: {
+    type: String,
+    default: ""
+  },
+  noLabel: Boolean,
+  showName: Boolean,
+  disabled: Boolean,
+  readonly: Boolean,
+  debounce: {
+    type: [String, Number],
+    default: 0
+  }
+});
+</script>

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

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <FieldLabel
+      v-if="!noLabel"
+      :field="field"
+      :show-name="showName"
+      class="text-sm font-semibold text-gray-shadow block mb-2"
+    />
+    <template v-if="readonly">
+      <div
+        class="border border-gray-300 rounded-md p-2 bg-gray-100"
+        v-html="modelValue"
+      />
+    </template>
+    <TinyMceEditor
+      v-else
+      class="mt-2"
+      :api-key="apiKey"
+      :disabled="disable"
+      :model-value="modelValue"
+      @update:model-value="$emit('update:model-value', $event)"
+    />
+  </div>
+</template>
+
+<script setup>
+import { default as TinyMceEditor } from "@tinymce/tinymce-vue";
+import { apiKey } from "components/Cms/SlideshowEditor/ContentEditor/tinymce-config";
+import FieldLabel from "danx/src/components/ActionTable/Form/Fields/FieldLabel";
+
+defineEmits(["update:model-value"]);
+defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: null
+  },
+  field: {
+    type: Object,
+    required: true
+  },
+  noLabel: Boolean,
+  showName: Boolean,
+  disable: Boolean,
+  readonly: Boolean
+});
+</script>

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

@@ -0,0 +1,23 @@
+export { default as BooleanField } from "./BooleanField";
+export { default as ConfirmPasswordField } from "./ConfirmPasswordField";
+export { default as DateField } from "./DateField";
+export { default as DateRangeField } from "./DateRangeField";
+export { default as DateTimeField } from "./DateTimeField";
+export { default as DateTimePicker } from "./DateTimePicker";
+export { default as EditableDiv } from "./EditableDiv";
+export { default as FieldLabel } from "./FieldLabel";
+export { default as FileUploadButton } from "./FileUploadButton";
+export { default as InlineDateTimeField } from "./InlineDateTimeField";
+export { default as IntegerField } from "./IntegerField";
+export { default as LabeledInput } from "./LabeledInput";
+export { default as MultiFileField } from "./MultiFileField";
+export { default as MultiKeywordField } from "./MultiKeywordField";
+export { default as NewPasswordField } from "./NewPasswordField";
+export { default as NumberField } from "./NumberField";
+export { default as NumberRangeField } from "./NumberRangeField";
+export { default as SelectDrawer } from "./SelectDrawer";
+export { default as SelectField } from "./SelectField";
+export { default as SelectWithChildrenField } from "./SelectWithChildrenField";
+export { default as SingleFileField } from "./SingleFileField";
+export { default as TextField } from "./TextField";
+export { default as WysiwygField } from "./WysiwygField";

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

@@ -0,0 +1,74 @@
+<template>
+  <div class="rendered-form">
+    <div
+      v-for="(field, index) in mappedFields"
+      :key="field.id"
+      :class="{ 'mt-4': index > 0 }"
+    >
+      <Component
+        :is="field.component"
+        v-model="fieldValues[field.name]"
+        :field="field"
+        :label="field.label || undefined"
+        :no-label="noLabel"
+        :show-name="showName"
+        :disable="disable"
+        :readonly="readonly"
+        @update:model-value="onInput(field.name, $event)"
+      />
+    </div>
+  </div>
+</template>
+<script setup>
+import BooleanField from "danx/src/components/ActionTable/Form/Fields/BooleanField";
+import DateField from "danx/src/components/ActionTable/Form/Fields/DateField";
+import DateRangeField from "danx/src/components/ActionTable/Form/Fields/DateRangeField";
+import IntegerField from "danx/src/components/ActionTable/Form/Fields/IntegerField";
+import MultiFileField from "danx/src/components/ActionTable/Form/Fields/MultiFileField";
+import NumberField from "danx/src/components/ActionTable/Form/Fields/NumberField";
+import SingleFileField from "danx/src/components/ActionTable/Form/Fields/SingleFileField";
+import TextField from "danx/src/components/ActionTable/Form/Fields/TextField";
+import WysiwygField from "danx/src/components/ActionTable/Form/Fields/WysiwygField";
+import { reactive } from "vue";
+
+const emit = defineEmits(["update:values"]);
+const props = defineProps({
+  values: {
+    type: Object,
+    default: null
+  },
+  fields: {
+    type: Array,
+    required: true
+  },
+  noLabel: Boolean,
+  showName: Boolean,
+  disable: Boolean,
+  readonly: Boolean
+});
+
+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
+};
+
+const mappedFields = props.fields.map((field) => ({
+  placeholder: `Enter ${field.label}`,
+  ...field,
+  component: FORM_FIELD_MAP[field.type],
+  default: field.type === "BOOLEAN" ? false : ""
+}));
+
+const fieldValues = reactive(props.values || {});
+
+function onInput(key, value) {
+  emit("update:values", { ...fieldValues, [key]: value });
+}
+</script>