quasar-ui-danx 0.2.28 → 0.2.30

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

@@ -6,7 +6,7 @@
     </slot>
     <span
         v-if="requiredLabel"
-        class="text-red-dark ml-1 text-xs bottom-1 relative"
+        class="text-red-900 ml-1 text-xs bottom-1 relative"
     >{{ requiredLabel }}</span>
   </span>
 </template>

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

@@ -1,10 +1,10 @@
 <template>
   <div class="inline-block">
     <div
-        class="cursor-pointer py-2 hover:bg-blue-light flex items-center justify-end"
+        class="cursor-pointer py-2 hover:bg-blue-200 flex items-center justify-end"
     >
       {{ fLocalizedDateTime(modelValue, { empty: "Never" }) }}
-      <EditIcon class="w-4 font-bold ml-2 text-gray-base" />
+      <EditIcon class="w-4 font-bold ml-2 text-gray-400" />
       <QPopupEdit
           v-slot="scope"
           :model-value="modelValue"

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

@@ -1,7 +1,7 @@
 <template>
   <div
       class="max-w-full relative overflow-auto"
-      :class="{'p-4 border rounded border-gray-medium': !readonly}"
+      :class="{'p-4 border rounded border-gray-300': !readonly}"
       @dragover.prevent
       @drop.prevent="onDrop"
   >
@@ -20,7 +20,7 @@
       >Upload</a>
       <a
           v-if="uploadedFiles.length > 0"
-          class="ml-3 text-red-dark"
+          class="ml-3 text-red-900"
           @click="onClear"
       >Clear</a>
       <input

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

@@ -11,7 +11,7 @@
         v-model="textInput"
         :field="field"
         :no-label="!field.label"
-        label-class="text-xs font-bold text-gray-dark"
+        label-class="text-xs font-bold text-zinc-800"
         parent-class="tight-label"
         input-class="!py-0"
         dense

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

@@ -10,7 +10,7 @@
           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"
+          class="cursor-pointer hover:bg-slate-200 px-8 py-3 flex items-center border-b border-slate-200"
           @click="toggleSelect(option)"
       >
         <QCheckbox

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <template v-if="!loading && !options.length">
-      <div class="text-gray-silver">No options available</div>
+      <div class="text-zinc-500">No options available</div>
     </template>
     <SelectField
         v-model="selectedOption"
@@ -22,7 +22,7 @@
           @update:model-value="onSelectChild(child)"
       >
         <div>{{ child.label }}</div>
-        <div class="text-xs text-gray-silver">{{ child.name }}</div>
+        <div class="text-xs text-zinc-500">{{ child.name }}</div>
       </QCheckbox>
     </div>
   </div>

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

@@ -1,7 +1,7 @@
 <template>
   <div
       class="max-w-full relative overflow-auto"
-      :class="{'p-4 border rounded border-gray-medium text-center': !readonly}"
+      :class="{'p-4 border rounded border-gray-300 text-center': !readonly}"
       @dragover.prevent
       @drop.prevent="onDrop"
   >
@@ -20,7 +20,7 @@
       >Upload</a>
       <a
           v-if="uploadedFile"
-          class="ml-3 text-red-dark"
+          class="ml-3 text-red-900"
           @click="onClear"
       >Clear</a>
       <input

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

@@ -60,7 +60,7 @@ defineProps({
   },
   labelClass: {
     type: String,
-    default: "text-sm text-gray-shadow"
+    default: "text-sm text-gray-700"
   },
   parentClass: {
     type: String,

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

@@ -4,7 +4,7 @@
         v-if="!noLabel"
         :field="field"
         :show-name="showName"
-        class="text-sm font-semibold text-gray-shadow block mb-2"
+        class="text-sm font-semibold text-gray-700 block mb-2"
     />
     <template v-if="readonly">
       <div

package/src/components/ActionTable/TableSummaryRow.vue

@@ -1,12 +1,12 @@
 <template>
   <QTr
       class="sticky-column-1 transition-all sticky-row"
-      :class="{'!bg-neutral-plus-7': !selectedCount, '!bg-blue-600 text-white selected': selectedCount, 'opacity-50': loading}"
+      :class="{'!bg-gray-100': !selectedCount, '!bg-blue-600 text-white selected': selectedCount, 'opacity-50': loading}"
   >
     <QTd
         :colspan="stickyColspan"
         class="font-bold transition-all"
-        :class="{'!bg-neutral-plus-7 !pl-5': !selectedCount, '!bg-blue-600 text-white !pl-4': selectedCount}"
+        :class="{'!bg-gray-100 !pl-5': !selectedCount, '!bg-blue-600 text-white !pl-4': selectedCount}"
     >
       <div class="flex flex-nowrap items-center">
         <div

package/src/components/ActionTable/tableColumns.ts

@@ -9,7 +9,9 @@ export interface TableColumn {
     field: string,
     format?: Function,
     innerClass?: string | object,
-    isSaving?: boolean,
+    style?: string,
+    headerStyle?: string,
+    isSaving?: boolean | Function,
     label: string,
     maxWidth?: number,
     minWidth?: number,
@@ -20,7 +22,7 @@ export interface TableColumn {
     sortable?: boolean,
     sortBy?: string,
     sortByExpression?: string,
-    titleColumns?: string[]
+    titleColumns?: Function,
     vnode?: Function,
 }
 

package/src/components/AuditHistory/AuditHistoryItem.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="text-gray-shadow flex items-stretch flex-nowrap p-4">
+  <div class="text-gray-700 flex items-stretch flex-nowrap p-4">
     <div class="flex-grow text-sm w-3/5 overflow-auto">
       <h5>{{ change.label }} ({{ change.name }})</h5>
       <div class="flex flex-nowrap items-center mt-4">
-        <div class="bg-red-light line-through p-2">
+        <div class="bg-red-200 line-through p-2">
           <AuditHistoryItemValue
               :type="change.type"
               :value="change.oldValue"
           />
         </div>
-        <div class="bg-green-plus-4 ml-2.5 p-2">
+        <div class="bg-emerald-200 ml-2.5 p-2">
           <AuditHistoryItemValue
               :type="change.type"
               :value="change.newValue"

package/src/components/PanelsDrawer/PanelsDrawerPanels.vue

@@ -1,7 +1,7 @@
 <template>
   <QTabPanels
       :model-value="activePanel"
-      class="overflow-y-auto bg-neutral-plus-7 h-full transition-all"
+      class="overflow-y-auto bg-gray-100 h-full transition-all"
   >
     <QTabPanel v-for="panel in panels" :key="panel.name" :name="panel.name">
       <RenderVnode

package/src/components/Utility/Controls/PreviousNextControls.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="previous-next-controls">
     <QBtn
-        class="bg-slate-200 border-neutral-plus-4 border border-solid !rounded-r-none !p-2 !min-w-0"
+        class="bg-slate-200 border-gray-300 border border-solid !rounded-r-none !p-2 !min-w-0"
         :disable="isLoading"
         :loading="isLoading"
         @click="$emit('next', -1)"
@@ -9,7 +9,7 @@
       <SkipPreviousIcon class="w-6" />
     </QBtn>
     <QBtn
-        class="bg-slate-200 border-neutral-plus-4 border border-solid border-l-0 !rounded-l-none !p-2 !min-w-0"
+        class="bg-slate-200 border-gray-300 border border-solid border-l-0 !rounded-l-none !p-2 !min-w-0"
         :disable="isLoading"
         :loading="isLoading"
         @click="$emit('next', 1)"

package/src/components/Utility/Dialogs/ConfirmDialog.vue

@@ -10,7 +10,7 @@
     <QCard class="flex flex-col flex-nowrap">
       <QCardSection
           v-if="title || $slots.title"
-          class="pl-6 pr-10 border-b border-gray-medium"
+          class="pl-6 pr-10 border-b border-gray-300"
       >
         <h3
             class="font-normal flex items-center"
@@ -29,12 +29,12 @@
       </QCardSection>
       <QCardSection
           v-if="content || $slots.default"
-          class="px-6 bg-neutral-plus-7 flex-grow max-h-full overflow-y-auto"
+          class="px-6 bg-gray-100 flex-grow max-h-full overflow-y-auto"
           :class="contentClass"
       >
         <slot>{{ content }}</slot>
       </QCardSection>
-      <div class="flex px-6 py-4 border-t border-gray-medium">
+      <div class="flex px-6 py-4 border-t border-gray-300">
         <div class="flex-grow">
           <QBtn
               :label="cancelText"

package/src/components/Utility/Dialogs/FullScreenDialog.vue

@@ -34,7 +34,7 @@ const props = defineProps({
 let computedClass = computed(() => {
   return {
     "bg-blue-600 text-white": props.blue,
-    "bg-white text-gray-base": !props.blue,
+    "bg-white text-gray-400": !props.blue,
     "items-center": props.center
   };
 });

package/src/components/Utility/Dialogs/InfoDialog.vue

@@ -10,7 +10,7 @@
     <QCard class="flex flex-col flex-nowrap">
       <QCardSection
           v-if="title || $slots.title"
-          class="pl-6 pr-10 border-b border-gray-medium"
+          class="pl-6 pr-10 border-b border-gray-300"
       >
         <h3
             class="font-normal flex items-center"
@@ -26,12 +26,12 @@
       </QCardSection>
       <QCardSection
           v-if="content || $slots.default"
-          class="px-6 bg-neutral-plus-7 flex-grow max-h-full overflow-y-auto"
+          class="px-6 bg-gray-100 flex-grow max-h-full overflow-y-auto"
       >
         <slot>{{ content }}</slot>
       </QCardSection>
       <div
-          class="flex items-center justify-center px-6 py-4 border-t border-gray-medium"
+          class="flex items-center justify-center px-6 py-4 border-t border-gray-300"
       >
         <div class="flex-grow text-right">
           <QBtn

package/src/components/Utility/Files/FilePreview.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative flex justify-center bg-neutral-plus-7" :class="{'rounded-2xl': !square}">
+  <div class="relative flex justify-center bg-gray-100" :class="{'rounded-2xl': !square}">
     <template v-if="computedImage">
       <div
           class="grow h-full overflow-hidden"
@@ -52,7 +52,7 @@
         <QLinearProgress
             :value="image.progress"
             size="15px"
-            color="green-base"
+            color="green-600"
             stripe
         />
       </div>
@@ -61,7 +61,7 @@
       <slot name="missing">
         <component
             :is="missingIcon"
-            class="w-full h-full p-2 text-gray-medium"
+            class="w-full h-full p-2 text-gray-300"
         />
       </slot>
     </template>
@@ -80,7 +80,7 @@
       <QBtn
           v-if="removable"
           size="sm"
-          class="bg-red-dark text-white !p-1 opacity-50 hover:opacity-100"
+          class="bg-red-900 text-white !p-1 opacity-50 hover:opacity-100"
           @click.stop="onRemove"
       >
         <div v-if="isConfirmingRemove" class="font-bold text-[1rem] leading-[1.2rem]">?</div>

package/src/components/Utility/Tabs/BadgeTab.vue

@@ -7,7 +7,7 @@
     <div class="flex items-center w-full">
       <div class="flex-grow text-sm">{{ label }}</div>
       <QBadge
-          class="bg-gray-base"
+          class="bg-gray-400"
           :label="count"
           rounded
       />

package/src/components/Utility/Tabs/IndicatorTab.vue

@@ -10,11 +10,11 @@
         <OverdueIcon
             v-if="overdue"
             class="w-5 ml-2"
-            :class="isActive ? 'text-white' : 'text-red-danger'"
+            :class="isActive ? 'text-white' : 'text-red-400'"
         />
         <WarningIcon
             v-else-if="warning"
-            class="text-yellow-warning w-5"
+            class="text-yellow-600 w-5"
         />
       </div>
     </div>

package/src/helpers/formats.ts

@@ -166,20 +166,28 @@ export function centerTruncate(str, maxLength) {
     }
 }
 
+interface FPercentOptions {
+    multiplier?: number,
+    maximumFractionDigits?: number,
+    NaN?: string
+}
+
 /**
  * Formats a number into a percentage
  * @param num
  * @param options
  * @returns {string}
  */
-export function fPercent(num, options = { multiplier: 100, maximumFractionDigits: 1, NaN: "N/A" }) {
-    num = parseFloat(num);
+export function fPercent(num: string | number, options: FPercentOptions = {}) {
+    options = { multiplier: 100, maximumFractionDigits: 1, NaN: "N/A", ...options };
+
+    num = parseFloat("" + num);
 
     if (isNaN(num)) {
         return options.NaN;
     }
 
-    return fNumber(num * options.multiplier, options) + "%";
+    return fNumber(num * (options.multiplier || 100), options) + "%";
 }
 
 

package/src/styles/actions.scss

@@ -5,6 +5,6 @@
   outline: 1px solid transparent;
 
   &:hover {
-    @apply bg-blue-light outline outline-blue-600;
+    @apply bg-blue-200 outline outline-blue-600;
   }
 }