quasar-ui-danx 0.0.10 → 0.0.12

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

@@ -0,0 +1,318 @@
+<template>
+  <div>
+    <q-select
+        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">
+            <q-chip
+                v-for="chipOption in chipOptions"
+                :key="'selected-' + chipOption.label"
+                class="!mr-1"
+            >{{ chipOption.label }}
+              </q-chip>
+              <q-chip
+                  v-if="selectedOptions.length > chipOptions.length"
+                  class="!mr-1"
+              >
+                +{{ selectedOptions.length - chipOptions.length }}
+                </q-chip>
+          </template>
+          <template v-else>
+            {{ placeholder }}
+          </template>
+        </div>
+        <div
+            v-else
+            :class="selectionClass"
+        >{{ selectedLabel }}
+        </div>
+      </template>
+      </q-select>
+  </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">
+      <q-checkbox
+          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>
+        </q-checkbox>
+    </div>
+  </div>
+</template>
+<script setup>
+import { remove } from '@ui/helpers/array';
+import { ref, watch } from 'vue';
+import SelectField from './SelectField';
+
+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 '@ui/components';
+import { useSingleFileUpload } from '@ui/helpers/singleFileUpload';
+import { onMounted } from 'vue';
+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
+});
+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>
+    <q-input
+        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>
+      </q-input>
+      <div v-if="readonly">
+        <LabelValueBlock
+            :label="label || field.label"
+            :value="modelValue"
+        />
+      </div>
+  </div>
+</template>
+
+<script setup>
+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: '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 { apiKey } from '@ui/vendor/tinymce-config';
+import { default as TinyMceEditor } from '@tinymce/tinymce-vue';
+import FieldLabel from './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.vue";
+export { default as ConfirmPasswordField } from "./ConfirmPasswordField.vue";
+export { default as DateField } from "./DateField.vue";
+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 FieldLabel } from "./FieldLabel.vue";
+export { default as FileUploadButton } from "./FileUploadButton.vue";
+export { default as InlineDateTimeField } from "./InlineDateTimeField.vue";
+export { default as IntegerField } from "./IntegerField.vue";
+export { default as LabeledInput } from "./LabeledInput.vue";
+export { default as MultiFileField } from "./MultiFileField.vue";
+export { default as MultiKeywordField } from "./MultiKeywordField.vue";
+export { default as NewPasswordField } from "./NewPasswordField.vue";
+export { default as NumberField } from "./NumberField.vue";
+export { default as NumberRangeField } from "./NumberRangeField.vue";
+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 TextField } from "./TextField.vue";
+export { default as WysiwygField } from "./WysiwygField.vue";

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

@@ -0,0 +1,76 @@
+<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 { reactive } from 'vue';
+import {
+  BooleanField,
+  DateField,
+  DateRangeField,
+  IntegerField,
+  MultiFileField,
+  NumberField,
+  SingleFileField,
+  TextField,
+  WysiwygField
+} from './Fields';
+
+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>