quasar-ui-danx 0.0.11 → 0.0.12

package/src/components/ActionTable/Filters/FilterableField.vue

@@ -2,20 +2,20 @@
   <div>
     <template v-if="field.type === 'multi-select'">
       <SelectField
-        v-if="field.options?.length > 0 || loading"
-        :model-value="modelValue"
-        :options="field.options"
-        multiple
-        :loading="loading"
-        :chip-limit="1"
-        filterable
-        :placeholder="field.placeholder"
-        :label="field.label"
-        @update:model-value="onUpdate"
+          v-if="field.options?.length > 0 || loading"
+          :model-value="modelValue"
+          :options="field.options"
+          multiple
+          :loading="loading"
+          :chip-limit="1"
+          filterable
+          :placeholder="field.placeholder"
+          :label="field.label"
+          @update:model-value="onUpdate"
       />
       <div
-        v-else
-        class="mt-2"
+          v-else
+          class="mt-2"
       >
         <div class="text-xs font-bold">{{ field.label }}</div>
         <div class="text-sm ml-3 py-2">No Available Options</div>
@@ -23,78 +23,78 @@
     </template>
 
     <SelectField
-      v-else-if="field.type === 'single-select'"
-      :model-value="modelValue"
-      :options="field.options"
-      :placeholder="field.placeholder"
-      :loading="loading"
-      :label="field.label"
-      @update:model-value="onUpdate"
+        v-else-if="field.type === 'single-select'"
+        :model-value="modelValue"
+        :options="field.options"
+        :placeholder="field.placeholder"
+        :loading="loading"
+        :label="field.label"
+        @update:model-value="onUpdate"
     />
     <DateField
-      v-else-if="field.type === 'date'"
-      :model-value="modelValue"
-      :label="field.label"
-      class="mt-2"
-      @update:model-value="onUpdate"
+        v-else-if="field.type === 'date'"
+        :model-value="modelValue"
+        :label="field.label"
+        class="mt-2"
+        @update:model-value="onUpdate"
     />
     <DateRangeField
-      v-else-if="field.type === 'date-range'"
-      :model-value="modelValue"
-      :label="field.label"
-      :inline="field.inline"
-      with-time
-      class="mt-2 reactive"
-      @update:model-value="onUpdate"
+        v-else-if="field.type === 'date-range'"
+        :model-value="modelValue"
+        :label="field.label"
+        :inline="field.inline"
+        with-time
+        class="mt-2 reactive"
+        @update:model-value="onUpdate"
     />
     <NumberRangeField
-      v-else-if="field.type === 'number-range'"
-      :model-value="modelValue"
-      :label="field.label"
-      class="mt-2"
-      :debounce="1000"
-      @update:model-value="onUpdate"
+        v-else-if="field.type === 'number-range'"
+        :model-value="modelValue"
+        :label="field.label"
+        class="mt-2"
+        :debounce="1000"
+        @update:model-value="onUpdate"
     />
     <NumberRangeField
-      v-else-if="field.type === 'currency-range'"
-      :model-value="modelValue"
-      :label="field.label"
-      class="mt-2"
-      :debounce="1000"
-      currency
-      @update:model-value="onUpdate"
+        v-else-if="field.type === 'currency-range'"
+        :model-value="modelValue"
+        :label="field.label"
+        class="mt-2"
+        :debounce="1000"
+        currency
+        @update:model-value="onUpdate"
     />
     <NumberRangeField
-      v-else-if="field.type === 'percent-range'"
-      :model-value="modelValue"
-      :label="field.label"
-      class="mt-2"
-      :debounce="1000"
-      percent
-      @update:model-value="onUpdate"
+        v-else-if="field.type === 'percent-range'"
+        :model-value="modelValue"
+        :label="field.label"
+        class="mt-2"
+        :debounce="1000"
+        percent
+        @update:model-value="onUpdate"
     />
     <BooleanField
-      v-else-if="field.type === 'boolean'"
-      :field="field"
-      :model-value="modelValue"
-      class="mt-2"
-      label-class="text-xs font-bold"
-      @update:model-value="onUpdate"
+        v-else-if="field.type === 'boolean'"
+        :field="field"
+        :model-value="modelValue"
+        class="mt-2"
+        label-class="text-xs font-bold"
+        @update:model-value="onUpdate"
     />
     <MultiKeywordField
-      v-else-if="field.type === 'multi-keywords'"
-      :model-value="modelValue"
-      :field="field"
-      @update:model-value="onUpdate"
+        v-else-if="field.type === 'multi-keywords'"
+        :model-value="modelValue"
+        :field="field"
+        @update:model-value="onUpdate"
     />
     <SelectWithChildrenField
-      v-else-if="field.type === 'select-with-children'"
-      :model-value="modelValue"
-      :options="field.options"
-      :loading="loading"
-      :label="field.label"
-      :placeholder="field.placeholder"
-      @update:model-value="onUpdate"
+        v-else-if="field.type === 'select-with-children'"
+        :model-value="modelValue"
+        :options="field.options"
+        :loading="loading"
+        :label="field.label"
+        :placeholder="field.placeholder"
+        @update:model-value="onUpdate"
     />
     <template v-else>
       Field &quot;{{ field.name }}&quot;: Unknown filter type {{ field.type }}
@@ -102,15 +102,17 @@
   </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 MultiKeywordField from "danx/src/components/ActionTable/Form/Fields/MultiKeywordField";
-import NumberRangeField from "danx/src/components/ActionTable/Form/Fields/NumberRangeField";
-import SelectField from "danx/src/components/ActionTable/Form/Fields/SelectField";
-import SelectWithChildrenField from "danx/src/components/ActionTable/Form/Fields/SelectWithChildrenField";
+import {
+  BooleanField,
+  DateField,
+  DateRangeField,
+  MultiKeywordField,
+  NumberRangeField,
+  SelectField,
+  SelectWithChildrenField
+} from '@ui/components';
 
-const emit = defineEmits(["update:model-value"]);
+const emit = defineEmits(['update:model-value']);
 const props = defineProps({
   field: {
     type: Object,
@@ -127,15 +129,15 @@ function onUpdate(val) {
   let newVal = val || undefined;
 
   switch (props.field.type) {
-    case "multi-select":
+    case 'multi-select':
       newVal = val.length > 0 ? val : undefined;
       break;
-    case "single-select":
-    case "boolean":
+    case 'single-select':
+    case 'boolean':
       newVal = val === null ? undefined : val;
       break;
   }
 
-  emit("update:model-value", newVal);
+  emit('update:model-value', newVal);
 }
 </script>

package/src/components/ActionTable/Filters/index.ts

@@ -0,0 +1,5 @@
+export {
+    default as CollapsableFiltersSidebar
+} from "./CollapsableFiltersSidebar.vue";
+export { default as FilterGroupList } from "./FilterGroupList.vue";
+export { default as FilterListToggle } from "./FilterListToggle.vue";

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

@@ -1,23 +1,23 @@
 <template>
-  <QToggle
-    :data-testid="'boolean-field-' + field.id"
-    :model-value="modelValue"
-    :toggle-indeterminate="toggleIndeterminate"
-    :indeterminate-value="undefined"
-    @update:model-value="$emit('update:model-value', $event)"
+  <q-toggle
+      :data-testid="'boolean-field-' + field.id"
+      :model-value="modelValue"
+      :toggle-indeterminate="toggleIndeterminate"
+      :indeterminate-value="undefined"
+      @update:model-value="$emit('update:model-value', $event)"
   >
     <FieldLabel
-      :field="field"
-      :show-name="showName"
-      :class="labelClass"
+        :field="field"
+        :show-name="showName"
+        :class="labelClass"
     />
-  </QToggle>
+    </q-toggle>
 </template>
 
 <script setup>
-import FieldLabel from "./FieldLabel";
+import FieldLabel from './FieldLabel';
 
-defineEmits(["update:model-value"]);
+defineEmits(['update:model-value']);
 defineProps({
   modelValue: {
     type: [Boolean],
@@ -29,7 +29,7 @@ defineProps({
   },
   labelClass: {
     type: String,
-    default: "text-sm"
+    default: 'text-sm'
   },
   showName: Boolean,
   toggleIndeterminate: Boolean

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

@@ -1,28 +1,28 @@
 <template>
   <LabeledInput
-    type="password"
-    v-bind="props"
-    :rules="rules"
-    @update:model-value="$emit('update:model-value', $event)"
+      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";
+import LabeledInput from './LabeledInput';
 
-defineEmits(["update:model-value"]);
+defineEmits(['update:model-value']);
 const props = defineProps({
   name: {
     type: String,
-    default: "password_confirmation"
+    default: 'password_confirmation'
   },
   label: {
     type: String,
-    default: "Confirm Password"
+    default: 'Confirm Password'
   },
   placeholder: {
     type: String,
-    default: "Confirm Password"
+    default: 'Confirm Password'
   },
   modelValue: {
     type: [String, Number],
@@ -34,13 +34,13 @@ const props = defineProps({
   },
   password: {
     type: String,
-    default: ""
+    default: ''
   },
   disabled: Boolean
 });
 
 const rules = [
   (val) =>
-    val === props.password || "The password and confirmation do not match"
+      val === props.password || 'The password and confirmation do not match'
 ];
 </script>

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

@@ -1,8 +1,8 @@
 <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>
@@ -17,21 +17,21 @@
         </template>
       </div>
     </div>
-    <QPopupProxy>
-      <QDate
-        v-model="date"
-        @update:model-value="onSave"
+    <q-popup-proxy>
+      <q-date
+          v-model="date"
+          @update:model-value="onSave"
       />
-    </QPopupProxy>
+    </q-popup-proxy>
   </div>
 </template>
 
 <script setup>
-import { CalendarIcon as DateIcon } from "@heroicons/vue/outline";
-import { fDate, parseQDate } from "danx/src/helpers/formats";
-import { computed, ref, watch } from "vue";
+import { CalendarIcon as DateIcon } from '@heroicons/vue/outline';
+import { fDate, parseQDate } from '@ui/helpers/formats';
+import { computed, ref, watch } from 'vue';
 
-const emit = defineEmits(["update:model-value"]);
+const emit = defineEmits(['update:model-value']);
 const props = defineProps({
   modelValue: {
     type: [String, Object],
@@ -45,7 +45,7 @@ const props = defineProps({
 
 const formattedDate = computed(() => {
   if (props.modelValue) {
-    return fDate(parseQDate(props.modelValue || "0000-00-00"));
+    return fDate(parseQDate(props.modelValue || '0000-00-00'));
   }
   return null;
 });
@@ -54,6 +54,6 @@ const date = ref(props.modelValue);
 watch(() => props.modelValue, val => date.value = val);
 
 function onSave() {
-  emit("update:model-value", date.value);
+  emit('update:model-value', date.value);
 }
 </script>

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

@@ -1,17 +1,17 @@
 <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>
     <template v-if="inline">
-      <QDate
-        v-model="dateRange"
-        range
-        class="reactive"
-        @update:model-value="onSave"
+      <q-date
+          v-model="dateRange"
+          range
+          class="reactive"
+          @update:model-value="onSave"
       />
     </template>
     <template v-else>
@@ -26,23 +26,23 @@
           </template>
         </div>
       </div>
-      <QPopupProxy>
-        <QDate
-          v-model="dateRange"
-          range
-          @update:model-value="onSave"
+      <q-popup-proxy>
+        <q-date
+            v-model="dateRange"
+            range
+            @update:model-value="onSave"
         />
-      </QPopupProxy>
+      </q-popup-proxy>
     </template>
   </div>
 </template>
 
 <script setup>
-import { CalendarIcon as DateIcon } from "@heroicons/vue/outline";
-import { fDate, parseQDate, parseQDateTime } from "danx/src/helpers/formats";
-import { computed, ref, watch } from "vue";
+import { CalendarIcon as DateIcon } from '@heroicons/vue/outline';
+import { fDate, parseQDate, parseQDateTime } from '@ui/helpers/formats';
+import { computed, ref, watch } from 'vue';
 
-const emit = defineEmits(["update:model-value"]);
+const emit = defineEmits(['update:model-value']);
 const props = defineProps({
   modelValue: {
     type: Object,
@@ -60,14 +60,14 @@ const formattedDates = computed(() => {
   if (dateRangeValue.value) {
     if (props.withTime) {
       return {
-        from: fDate(parseQDateTime(dateRangeValue.value.from || "0000-00-00")),
-        to: fDate(parseQDateTime(dateRangeValue.value.to || "9999-12-31"))
+        from: fDate(parseQDateTime(dateRangeValue.value.from || '0000-00-00')),
+        to: fDate(parseQDateTime(dateRangeValue.value.to || '9999-12-31'))
       };
     }
 
     return {
-      from: fDate(parseQDate(dateRangeValue.value.from || "0000-00-00")),
-      to: fDate(parseQDate(dateRangeValue.value.to || "9999-12-31"))
+      from: fDate(parseQDate(dateRangeValue.value.from || '0000-00-00')),
+      to: fDate(parseQDate(dateRangeValue.value.to || '9999-12-31'))
     };
   }
   return {
@@ -89,7 +89,7 @@ function toQDateValue(val) {
 const dateRangeValue = computed(() => {
   let range = dateRange.value;
 
-  if (typeof range === "string") {
+  if (typeof range === 'string') {
     range = {
       from: range,
       to: range
@@ -97,14 +97,14 @@ const dateRangeValue = computed(() => {
   }
 
   if (range?.from && range?.to && props.withTime) {
-    range.from += " 00:00:00";
-    range.to += " 23:59:59";
+    range.from += ' 00:00:00';
+    range.to += ' 23:59:59';
   }
 
   return range;
 });
 
 function onSave() {
-  emit("update:model-value", dateRangeValue.value);
+  emit('update:model-value', dateRangeValue.value);
 }
 </script>

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

@@ -1,34 +1,34 @@
 <template>
   <div>
-    <QInput
-      :model-value="fLocalizedDateTime(modelValue)"
-      :color="color"
-      class="bg-white rounded overflow-hidden px-2 w-48"
-      dense
-      readonly
-      @click="isShowing = true"
+    <q-input
+        :model-value="fLocalizedDateTime(modelValue)"
+        :color="color"
+        class="bg-white rounded overflow-hidden px-2 w-48"
+        dense
+        readonly
+        @click="isShowing = true"
     >
       <template #append>
-        <QIcon name="event" class="cursor-pointer">
-          <QPopupProxy v-model="isShowing">
+        <q-icon name="event" class="cursor-pointer">
+          <q-popup-proxy v-model="isShowing">
             <DateTimePicker
-              v-model="dateTime"
-              @cancel="isShowing = false"
-              @save="onSave"
+                v-model="dateTime"
+                @cancel="isShowing = false"
+                @save="onSave"
             />
-          </QPopupProxy>
-        </QIcon>
+          </q-popup-proxy>
+        </q-icon>
       </template>
-    </QInput>
+      </q-input>
   </div>
 </template>
 
 <script setup>
-import DateTimePicker from "danx/src/components/ActionTable/Form/Fields/DateTimePicker";
-import { fLocalizedDateTime } from "danx/src/helpers/formats";
-import { ref } from "vue";
+import { fLocalizedDateTime } from '@ui/helpers/formats';
+import { ref } from 'vue';
+import DateTimePicker from './DateTimePicker';
 
-const emit = defineEmits(["update:model-value"]);
+const emit = defineEmits(['update:model-value']);
 const props = defineProps({
   modelValue: {
     type: String,
@@ -36,7 +36,7 @@ const props = defineProps({
   },
   color: {
     type: String,
-    default: "blue-base"
+    default: 'blue-base'
   }
 });
 
@@ -44,7 +44,7 @@ const isShowing = ref(false);
 const dateTime = ref(props.modelValue);
 
 function onSave() {
-  emit("update:model-value", dateTime.value);
+  emit('update:model-value', dateTime.value);
   isShowing.value = false;
 }
 </script>

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

@@ -1,35 +1,35 @@
 <template>
-  <QPopupProxy
-    :model-value="true"
-    cover
-    transition-show="scale"
-    transition-hide="scale"
-    class="bg-transparent shadow-none flex items-stretch"
+  <q-popup-proxy
+      :model-value="true"
+      cover
+      transition-show="scale"
+      transition-hide="scale"
+      class="bg-transparent shadow-none flex items-stretch"
   >
-    <QDate v-model="dateTime" :mask="mask" :color="color">
+    <q-date v-model="dateTime" :mask="mask" :color="color">
       <div class="flex items-center justify-center">
         <div v-if="nullable" class="flex-grow">
-          <QBtn label="Clear" color="blue-base" flat @click="dateTime = null" />
+          <q-btn label="Clear" color="blue-base" flat @click="dateTime = null" />
         </div>
         <div>
-          <QBtn
-            label="Cancel"
-            color="blue-base"
-            flat
-            @click="$emit('cancel')"
+          <q-btn
+              label="Cancel"
+              color="blue-base"
+              flat
+              @click="$emit('cancel')"
           />
-          <QBtn label="Set" color="blue-base" flat @click="$emit('save')" />
+          <q-btn label="Set" color="blue-base" flat @click="$emit('save')" />
         </div>
       </div>
-    </QDate>
-    <QTime v-model="dateTime" :mask="mask" :color="color" class="ml-3" />
-  </QPopupProxy>
+    </q-date>
+    <q-time v-model="dateTime" :mask="mask" :color="color" class="ml-3" />
+  </q-popup-proxy>
 </template>
 <script setup>
-import { dbDateTime, localizedDateTime, remoteDateTime } from "danx/src/helpers/formats";
-import { computed } from "vue";
+import { dbDateTime, localizedDateTime, remoteDateTime } from '@ui/helpers/formats';
+import { computed } from 'vue';
 
-const emit = defineEmits(["update:modelValue", "save", "cancel", "clear"]);
+const emit = defineEmits(['update:modelValue', 'save', 'cancel', 'clear']);
 const props = defineProps({
   modelValue: {
     type: String,
@@ -37,11 +37,11 @@ const props = defineProps({
   },
   mask: {
     type: String,
-    default: "YYYY-MM-DD HH:mm"
+    default: 'YYYY-MM-DD HH:mm'
   },
   color: {
     type: String,
-    default: "blue-base"
+    default: 'blue-base'
   },
   nullable: Boolean
 });
@@ -52,7 +52,7 @@ const dateTime = computed({
     const newValue = value ? dbDateTime(remoteDateTime(value)) : null;
 
     if (newValue || props.nullable) {
-      emit("update:modelValue", newValue);
+      emit('update:modelValue', newValue);
     }
   }
 });