quasar-ui-danx 0.0.10 → 0.0.12

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

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <SelectField
+        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-gray-dark"
+        parent-class="tight-label"
+        input-class="!py-0"
+        dense
+        type="textarea"
+        :debounce="500"
+        @update:model-value="onChange"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue';
+import SelectField from './SelectField';
+import TextField from './TextField';
+
+const emit = defineEmits(['update:model-value']);
+const props = defineProps({
+  modelValue: {
+    type: [String, Number, Object],
+    default: ''
+  },
+  field: {
+    type: Object,
+    default: null
+  }
+});
+
+const selectedFieldName = ref(props.field.defaultOption);
+const searchList = computed(() => props.modelValue && props.modelValue[selectedFieldName.value]);
+const textInput = ref(formatModelValue());
+function onChange() {
+  textInput.value = textInput.value?.replace(/\n/g, ',').replace(/,{2,}/g, ',') || '';
+  emit('update:model-value', textInput.value ? { [selectedFieldName.value]: textInput.value.split(',') } : undefined);
+}
+
+function formatModelValue() {
+  return Array.isArray(searchList.value) ? searchList.value?.join(',') : '';
+}
+
+watch(() => props.modelValue, () => {
+  textInput.value = formatModelValue();
+});
+</script>

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

@@ -0,0 +1,39 @@
+<template>
+  <LabeledInput
+      type="password"
+      v-bind="props"
+      :rules="rules"
+      @update:model-value="$emit('update:model-value', $event)"
+  />
+</template>
+
+<script setup>
+import LabeledInput from './LabeledInput';
+
+defineEmits(['update:model-value']);
+const props = defineProps({
+  name: {
+    type: String,
+    default: 'password'
+  },
+  label: {
+    type: String,
+    default: 'Password'
+  },
+  placeholder: {
+    type: String,
+    default: 'Enter Password'
+  },
+  modelValue: {
+    type: [String, Number],
+    required: true
+  },
+  error: {
+    type: String,
+    default: null
+  },
+  disabled: Boolean
+});
+
+const rules = [(val) => val.length >= 8 || 'Please use at least 8 characters'];
+</script>

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

@@ -0,0 +1,94 @@
+<template>
+  <q-input
+      :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': hidePrependLabel, 'prepend-label': !hidePrependLabel}"
+      @update:model-value="onInput"
+  >
+    <template #prepend>
+      <FieldLabel
+          :field="fieldOptions"
+          :show-name="showName"
+      />
+    </template>
+    </q-input>
+</template>
+
+<script setup>
+import { fNumber } from '@ui/helpers/formats';
+import { computed, nextTick, ref, watch } from 'vue';
+import FieldLabel from './FieldLabel';
+
+const emit = defineEmits(['update:model-value']);
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: ''
+  },
+  precision: {
+    type: Number,
+    default: 2
+  },
+  label: {
+    type: String,
+    default: undefined
+  },
+  field: {
+    type: Object,
+    default: null
+  },
+  inputClass: {
+    type: String,
+    default: ''
+  },
+  hidePrependLabel: Boolean,
+  currency: Boolean,
+  showName: Boolean
+});
+
+const numberVal = ref(format(props.modelValue));
+watch(() => props.modelValue, () => numberVal.value = format(props.modelValue));
+
+const fieldOptions = computed(() => props.field || { label: props.label || '', placeholder: '', id: '' });
+
+function format(number) {
+  if (!number && number !== 0 && number !== '0') return number;
+
+  const minimumFractionDigits = Math.min(props.precision, ('' + number).split('.')[1]?.length || 0);
+  let options = {
+    minimumFractionDigits
+  };
+
+  if (props.currency) {
+    options = {
+      style: 'currency',
+      currency: 'USD',
+      minimumFractionDigits
+    };
+  }
+  return fNumber(number, options);
+}
+function onInput(value) {
+  let number = '';
+
+  // Prevent invalid characters
+  if (value.match(/[^\d.,$]/)) {
+    const oldVal = numberVal.value;
+    // XXX: To get QInput to show only the value we want
+    numberVal.value += ' ';
+    return nextTick(() => numberVal.value = oldVal);
+  }
+
+  if (value !== '') {
+    value = value.replace(/[^\d.]/g, '');
+    number = Number(value);
+    numberVal.value = format(number);
+  }
+  emit('update:model-value', number === '' ? undefined : number);
+}
+</script>

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

@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <div
+        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-base"
+      />
+      <div class="text-sm ml-3 hover:text-blue-base whitespace-nowrap">
+        <template v-if="range">
+          {{ formatNum(range.from || 0) }} - {{ formatNum(range.to) }}
+        </template>
+        <template v-else>
+          No Limit
+        </template>
+      </div>
+    </div>
+    <q-popup-proxy>
+      <NumberField
+          v-model="range.from"
+          :field="minField"
+          @update:model-value="onSave"
+      />
+      <NumberField
+          v-model="range.to"
+          class="mt-2"
+          :field="maxField"
+          @update:model-value="onSave"
+      />
+      </q-popup-proxy>
+  </div>
+</template>
+
+<script setup>
+import { CurrencyDollarIcon as CurrencyIcon, HashtagIcon as NumberIcon } from '@heroicons/vue/outline';
+import { fCurrency, fNumber, fPercent } from '@ui/helpers';
+import { PercentIcon } from '@ui/svg';
+import { useDebounceFn } from '@vueuse/core';
+import { computed, ref, watch } from 'vue';
+import NumberField from './NumberField';
+
+const emit = defineEmits(['update:model-value']);
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: null
+  },
+  label: {
+    type: String,
+    default: null
+  },
+  icon: {
+    type: Object,
+    default: null
+  },
+  currency: Boolean,
+  percent: Boolean,
+  debounce: {
+    type: Number,
+    default: 0
+  }
+});
+
+const symbol = computed(() => {
+  if (props.currency) {
+    return '$';
+  } else if (props.percent) {
+    return '%';
+  } else {
+    return '';
+  }
+});
+const minField = computed(() => {
+  return {
+    id: 'min-field',
+    name: 'from',
+    label: 'Min' + symbol.value,
+    placeholder: '0'
+  };
+});
+
+const maxField = computed(() => {
+  return {
+    id: 'max-field',
+    name: 'to',
+    label: 'Max' + symbol.value,
+    placeholder: 'No Limit'
+  };
+});
+
+const previewIcon = computed(() => props.icon || (props.currency ? CurrencyIcon : (props.percent ? PercentIcon : NumberIcon)));
+
+const range = ref({});
+watch(() => props.modelValue, setRange);
+function setRange(val) {
+  const multiplier = props.percent ? 100 : 1;
+  range.value = {
+    from: (val?.from ? val.from * multiplier : undefined),
+    to: (val?.to ? val.to * multiplier : undefined)
+  };
+}
+setRange(props.modelValue || { from: undefined, to: undefined });
+
+/**
+ * Convert the number into a nicely formatted string
+ * @param num
+ * @returns {string}
+ */
+function formatNum(num) {
+  if (num === undefined) return 'No Limit';
+  if (props.currency) {
+    return fCurrency(num);
+  }
+  if (props.percent) {
+    return fPercent(num, { multiplier: 1, maximumFractionDigits: 2 });
+  }
+  return fNumber(num);
+}
+
+/**
+ * Update the modelValue only after the debounce timeout
+ * Empty values are converted to undefined so they will not be filtered on
+ * @type {(function(): void)|*}
+ */
+const onSave = useDebounceFn(() => {
+  if (range.value && (range.value.from || range.value.to)) {
+    const multiplier = props.percent ? .01 : 1;
+    let newVal = {
+      from: (range.value.from ? range.value.from * multiplier : undefined),
+      to: (range.value.to ? range.value.to * multiplier : undefined)
+    };
+    emit('update:model-value', newVal);
+  }
+}, props.debounce);
+</script>

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

@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <ContentDrawer
+        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-gray-light px-8 py-3 flex items-center border-b border-gray-light"
+          @click="toggleSelect(option)"
+      >
+        <q-checkbox
+            :model-value="isSelected(option)"
+            class="mr-2"
+        />
+        <slot
+            name="option"
+            :opt="option"
+        >{{ option.label }}
+        </slot>
+      </div>
+    </ContentDrawer>
+
+    <q-chip
+        ref="select"
+        outline
+        clickable
+        size="16px"
+        @click="showDrawer = true"
+    >
+      <slot name="selected">
+        <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
+              >
+            </template>
+            <template v-else>
+              {{ getOptionLabel(modelValue) }}
+            </template>
+          </slot>
+        </template>
+        <template v-else>
+          <slot name="placeholder">{{ placeholder }}</slot>
+        </template>
+      </slot>
+      </q-chip>
+  </div>
+</template>
+
+<script setup>
+import { ContentDrawer } from '@ui/components';
+import { computed, ref } from 'vue';
+
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps({
+  modelValue: {
+    type: [Object, String, Array, null],
+    required: true
+  },
+  options: {
+    type: Array,
+    default: () => []
+  },
+  multiple: Boolean,
+  label: {
+    type: String,
+    default: 'Select'
+  },
+  placeholder: {
+    type: String,
+    default: 'All'
+  }
+});
+
+const showDrawer = ref(false);
+const formattedOptions = computed(() =>
+    props.options.map((opt) =>
+        typeof opt === 'string'
+            ? {
+              label: opt,
+              value: opt
+            }
+            : opt
+    )
+);
+
+function getOptionValue(option) {
+  return option.value === undefined ? option : option.value;
+}
+
+function getOptionLabel(value) {
+  return formattedOptions.value.find((opt) => opt.value === value).label;
+}
+
+function isSelected(option) {
+  const optionValue = getOptionValue(option);
+
+  if (props.multiple) {
+    return props.modelValue.includes(optionValue);
+  } else {
+    return props.modelValue === optionValue;
+  }
+}
+
+function toggleSelect(option) {
+  let optionValue = getOptionValue(option);
+
+  let selection = optionValue;
+
+  if (props.multiple) {
+    selection = [...props.modelValue];
+    if (isSelected(optionValue)) {
+      selection = selection.filter((opt) => opt !== optionValue);
+    } else {
+      selection.push(optionValue);
+    }
+  } else {
+    // Allow deselection on single select
+    if (selection === props.modelValue) {
+      selection = null;
+    }
+  }
+
+  emit('update:modelValue', selection);
+}
+</script>