quasar-ui-danx 0.0.9 → 0.0.11

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 SelectField from "danx/src/components/ActionTable/Form/Fields/SelectField";
+import TextField from "danx/src/components/ActionTable/Form/Fields/TextField";
+import { computed, ref, watch } from "vue";
+
+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 "danx/src/components/ActionTable/Form/Fields/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>
+  <QInput
+    :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>
+  </QInput>
+</template>
+
+<script setup>
+import FieldLabel from "danx/src/components/ActionTable/Form/Fields/FieldLabel";
+import { fNumber } from "danx/src/helpers/formats";
+import { computed, nextTick, ref, watch } from "vue";
+
+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>
+    <QPopupProxy>
+      <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"
+      />
+    </QPopupProxy>
+  </div>
+</template>
+
+<script setup>
+import { PercentIcon } from "@/svg";
+import { CurrencyDollarIcon as CurrencyIcon, HashtagIcon as NumberIcon } from "@heroicons/vue/outline";
+import { useDebounceFn } from "@vueuse/core";
+import NumberField from "danx/src/components/ActionTable/Form/Fields/NumberField";
+import { fCurrency, fNumber, fPercent } from "danx/src/helpers/formats";
+import { computed, ref, watch } from "vue";
+
+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)"
+      >
+        <QCheckbox
+          :model-value="isSelected(option)"
+          class="mr-2"
+        />
+        <slot
+          name="option"
+          :opt="option"
+        >{{ option.label }}
+        </slot>
+      </div>
+    </ContentDrawer>
+
+    <QChip
+      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>
+    </QChip>
+  </div>
+</template>
+
+<script setup>
+import { ContentDrawer } from "danx/src/components/Utility";
+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>