quasar-ui-danx 0.0.11 → 0.0.13

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

@@ -1,15 +1,15 @@
 <template>
   <div>
     <div
-      v-if="label"
-      class="font-bold text-xs mb-2"
+        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"
+          :is="previewIcon"
+          class="w-5 text-blue-base"
       />
       <div class="text-sm ml-3 hover:text-blue-base whitespace-nowrap">
         <template v-if="range">
@@ -20,31 +20,31 @@
         </template>
       </div>
     </div>
-    <QPopupProxy>
+    <q-popup-proxy>
       <NumberField
-        v-model="range.from"
-        :field="minField"
-        @update:model-value="onSave"
+          v-model="range.from"
+          :field="minField"
+          @update:model-value="onSave"
       />
       <NumberField
-        v-model="range.to"
-        class="mt-2"
-        :field="maxField"
-        @update:model-value="onSave"
+          v-model="range.to"
+          class="mt-2"
+          :field="maxField"
+          @update:model-value="onSave"
       />
-    </QPopupProxy>
+      </q-popup-proxy>
   </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";
+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 emit = defineEmits(['update:model-value']);
 const props = defineProps({
   modelValue: {
     type: Object,
@@ -68,28 +68,28 @@ const props = defineProps({
 
 const symbol = computed(() => {
   if (props.currency) {
-    return "$";
+    return '$';
   } else if (props.percent) {
-    return "%";
+    return '%';
   } else {
-    return "";
+    return '';
   }
 });
 const minField = computed(() => {
   return {
-    id: "min-field",
-    name: "from",
-    label: "Min" + symbol.value,
-    placeholder: "0"
+    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"
+    id: 'max-field',
+    name: 'to',
+    label: 'Max' + symbol.value,
+    placeholder: 'No Limit'
   };
 });
 
@@ -112,7 +112,7 @@ setRange(props.modelValue || { from: undefined, to: undefined });
  * @returns {string}
  */
 function formatNum(num) {
-  if (num === undefined) return "No Limit";
+  if (num === undefined) return 'No Limit';
   if (props.currency) {
     return fCurrency(num);
   }
@@ -134,7 +134,7 @@ const onSave = useDebounceFn(() => {
       from: (range.value.from ? range.value.from * multiplier : undefined),
       to: (range.value.to ? range.value.to * multiplier : undefined)
     };
-    emit("update:model-value", newVal);
+    emit('update:model-value', newVal);
   }
 }, props.debounce);
 </script>

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

@@ -1,36 +1,36 @@
 <template>
   <div>
     <ContentDrawer
-      v-model:show="showDrawer"
-      content-class=""
-      position="bottom"
-      :title="'Filter ' + label"
+        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)"
+          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"
+        <q-checkbox
+            :model-value="isSelected(option)"
+            class="mr-2"
         />
         <slot
-          name="option"
-          :opt="option"
+            name="option"
+            :opt="option"
         >{{ option.label }}
         </slot>
       </div>
     </ContentDrawer>
 
-    <QChip
-      ref="select"
-      outline
-      clickable
-      size="16px"
-      @click="showDrawer = true"
+    <q-chip
+        ref="select"
+        outline
+        clickable
+        size="16px"
+        @click="showDrawer = true"
     >
       <slot name="selected">
         <slot name="label">{{ label }}:&nbsp;</slot>
@@ -39,7 +39,7 @@
             <template v-if="multiple">
               {{ getOptionLabel(modelValue[0]) }}
               <template
-                v-if="modelValue.length > 1"
+                  v-if="modelValue.length > 1"
               >+ {{ modelValue.length - 1 }}
               </template
               >
@@ -53,15 +53,15 @@
           <slot name="placeholder">{{ placeholder }}</slot>
         </template>
       </slot>
-    </QChip>
+      </q-chip>
   </div>
 </template>
 
 <script setup>
-import { ContentDrawer } from "danx/src/components/Utility";
-import { computed, ref } from "vue";
+import { ContentDrawer } from '@ui/components';
+import { computed, ref } from 'vue';
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
   modelValue: {
     type: [Object, String, Array, null],
@@ -74,24 +74,24 @@ const props = defineProps({
   multiple: Boolean,
   label: {
     type: String,
-    default: "Select"
+    default: 'Select'
   },
   placeholder: {
     type: String,
-    default: "All"
+    default: 'All'
   }
 });
 
 const showDrawer = ref(false);
 const formattedOptions = computed(() =>
-  props.options.map((opt) =>
-    typeof opt === "string"
-      ? {
-        label: opt,
-        value: opt
-      }
-      : opt
-  )
+    props.options.map((opt) =>
+        typeof opt === 'string'
+            ? {
+              label: opt,
+              value: opt
+            }
+            : opt
+    )
 );
 
 function getOptionValue(option) {
@@ -131,6 +131,6 @@ function toggleSelect(option) {
     }
   }
 
-  emit("update:modelValue", selection);
+  emit('update:modelValue', selection);
 }
 </script>

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

@@ -1,73 +1,73 @@
 <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"
+    <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' : ''"
+            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}"
+            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"
+            <q-chip
+                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>
+              </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"
+            v-else
+            :class="selectionClass"
         >{{ selectedLabel }}
         </div>
       </template>
-    </QSelect>
+      </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";
+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 emit = defineEmits(['update:model-value', 'search']);
 const props = defineProps({
   ...QSelect.props,
   modelValue: {
@@ -76,7 +76,7 @@ const props = defineProps({
   },
   placeholder: {
     type: String,
-    default: ""
+    default: ''
   },
   selectionLabel: {
     type: String,
@@ -88,11 +88,11 @@ const props = defineProps({
   },
   inputClass: {
     type: String,
-    default: ""
+    default: ''
   },
   selectionClass: {
     type: String,
-    default: ""
+    default: ''
   },
   options: {
     type: Array,
@@ -148,10 +148,10 @@ const selectedValue = computed(() => {
   if (props.multiple) {
     const arrVal = Array.isArray(props.modelValue) ? props.modelValue : [];
     return arrVal.map((v) => {
-      return v === null ? "__null__" : v;
+      return v === null ? '__null__' : v;
     }) || [];
   } else {
-    return props.modelValue === null ? "__null__" : props.modelValue;
+    return props.modelValue === null ? '__null__' : props.modelValue;
   }
 });
 
@@ -165,7 +165,7 @@ const selectedOptions = computed(() => {
     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);
+    return values.includes(o.value) || values.map(v => typeof v === 'object' && v.id).includes(o.value?.id);
   });
 });
 
@@ -175,10 +175,10 @@ const selectedOptions = computed(() => {
  * @type {ComputedRef<unknown>}
  */
 const selectedLabel = computed(() => {
-  if (props.filterable && isShowing.value) return "";
+  if (props.filterable && isShowing.value) return '';
 
   if (!selectedOptions.value || selectedOptions.value.length === 0) {
-    return props.placeholder || "(Select Option)";
+    return props.placeholder || '(Select Option)';
   }
   return selectedOptions.value[0].selectionLabel;
 });
@@ -197,13 +197,13 @@ const chipOptions = computed(() => {
  * @returns {*|string}
  */
 function resolveLabel(option) {
-  if (typeof option === "string") {
+  if (typeof option === 'string') {
     return option;
   }
-  if (typeof props.optionLabel === "string") {
+  if (typeof props.optionLabel === 'string') {
     return option[props.optionLabel];
   }
-  if (typeof props.optionLabel === "function") {
+  if (typeof props.optionLabel === 'function') {
     return props.optionLabel(option);
   }
   return option?.label;
@@ -216,13 +216,13 @@ function resolveLabel(option) {
  * @returns {*|{default: null, type: String | StringConstructor}|string}
  */
 function resolveSelectionLabel(option) {
-  if (typeof option === "string") {
+  if (typeof option === 'string') {
     return option;
   }
-  if (typeof props.selectionLabel === "string") {
+  if (typeof props.selectionLabel === 'string') {
     return option[props.selectionLabel];
   }
-  if (typeof props.selectionLabel === "function") {
+  if (typeof props.selectionLabel === 'function') {
     return props.selectionLabel(option);
   }
   return option?.selectionLabel || option?.label;
@@ -234,17 +234,17 @@ function resolveSelectionLabel(option) {
  * @returns {string|*|string}
  */
 function resolveValue(option) {
-  if (typeof option === "string") {
+  if (typeof option === 'string') {
     return option;
   }
   let value = option.value;
-  if (typeof props.optionValue === "string") {
+  if (typeof props.optionValue === 'string') {
     value = option[props.optionValue];
-  } else if (typeof props.optionValue === "function") {
+  } 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;
+  return value === null ? '__null__' : value;
 }
 
 /**
@@ -255,9 +255,9 @@ function resolveValue(option) {
  */
 function onUpdate(value) {
   if (Array.isArray(value)) {
-    value = value.map((v) => v === "__null__" ? null : v);
+    value = value.map((v) => v === '__null__' ? null : v);
   }
-  emit("update:model-value", value === "__null__" ? null : value);
+  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
@@ -291,7 +291,7 @@ async function onFilter(val, update) {
  * See the onUpdate function for more details
  */
 function onClear() {
-  emit("update:model-value", undefined);
+  emit('update:model-value', undefined);
 }
 
 /**

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

@@ -4,35 +4,35 @@
       <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"
+        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)"
+      <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>
-      </QCheckbox>
+        </q-checkbox>
     </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";
+import { remove } from '@ui/helpers/array';
+import { ref, watch } from 'vue';
+import SelectField from './SelectField';
 
-const emit = defineEmits(["update:model-value"]);
+const emit = defineEmits(['update:model-value']);
 const props = defineProps({
   modelValue: {
     type: Array,
@@ -40,11 +40,11 @@ const props = defineProps({
   },
   label: {
     type: String,
-    default: "Selection"
+    default: 'Selection'
   },
   placeholder: {
     type: String,
-    default: "Select an option"
+    default: 'Select an option'
   },
   options: {
     type: Array,
@@ -68,11 +68,11 @@ function onSelectChild(child) {
   } else {
     selectedChildren.value.push(child.id);
   }
-  emit("update:model-value", selectedChildren.value.length > 0 ? selectedChildren.value : undefined);
+  emit('update:model-value', selectedChildren.value.length > 0 ? selectedChildren.value : undefined);
 }
 function onSelectOption() {
   selectedChildren.value = [];
-  emit("update:model-value", undefined);
+  emit('update:model-value', undefined);
 }
 watch(() => props.modelValue, (value) => {
   selectedOption.value = resolveSelectedOption();