quasar-ui-danx 0.0.44 → 0.0.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.0.44",
+  "version": "0.0.46",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",

package/src/components/AuditHistory/AuditHistoryItem.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="text-gray-shadow 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">
+          <AdHistoryItemValue
+              :type="change.type"
+              :value="change.oldValue"
+          />
+        </div>
+        <div class="bg-green-plus-4 ml-2.5 p-2">
+          <AdHistoryItemValue
+              :type="change.type"
+              :value="change.newValue"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="ml-4 text-sm w-2/5">
+      <template v-if="item.user">
+        <div>{{ item.user.name }}</div>
+        <div>{{ item.user.email }}</div>
+      </template>
+      <div>{{ item.account }}</div>
+      <div>
+        <a v-if="item.audit_request_id" :href="novaUrl" target="_blank">{{ fLocalizedDateTime(item.timestamp) }}</a>
+        <template v-else>{{ fLocalizedDateTime(item.timestamp) }}</template>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { computed } from 'vue';
+import { fLocalizedDateTime } from '../../helpers';
+import AdHistoryItemValue from './AuditHistoryItemValue';
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  },
+  change: {
+    type: Object,
+    required: true
+  },
+  novaUrl: {
+    type: String,
+    default: '/nova'
+  }
+});
+
+const novaUrl = computed(() => props.novaUrl + `/resources/audit-requests/${props.item.audit_request_id}`);
+</script>

package/src/components/AuditHistory/AuditHistoryItemValue.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="flex space-x-2">
+    <template v-if="type === 'SINGLE_FILE'">
+      <FilePreview
+          :image="value"
+          class="w-24"
+      />
+    </template>
+    <template v-else-if="type === 'MULTI_FILE'">
+      <FilePreview
+          v-for="file in value"
+          :key="'file-' + file.id"
+          :image="file"
+          class="w-24 mb-2"
+      />
+    </template>
+    <template v-else-if="type === 'WYSIWYG'">
+      <div v-html="value" />
+    </template>
+    <template v-else>
+      {{ format(value) }}
+    </template>
+  </div>
+</template>
+<script setup>
+import { fCurrency, fDate, fLocalizedDateTime, fNumber } from '../../helpers';
+import { FilePreview } from '../Utility';
+
+const props = defineProps({
+  type: {
+    type: String,
+    required: true
+  },
+  value: {
+    type: [Number, String, Array, Object, Boolean],
+    default: null
+  }
+});
+
+function format(value) {
+  if (value === null || value === '' || value === undefined) {
+    return '';
+  }
+
+  switch (props.type) {
+    case 'NUMBER':
+      return fNumber(value);
+    case 'CURRENCY':
+      return fCurrency(value);
+    case 'DATE':
+      return fDate(value);
+    case 'DATETIME':
+      return fLocalizedDateTime(value);
+    case 'BOOLEAN':
+      return value ? 'Yes' : 'No';
+  }
+
+  return value;
+}
+</script>

package/src/components/AuditHistory/index.ts

@@ -0,0 +1,2 @@
+export { default as AuditHistoryItem } from "./AuditHistoryItem.vue";
+export { default as AuditHistoryItemValue } from "./AuditHistoryItemValue.vue";

package/src/components/PanelsDrawer/PanelsDrawer.vue

@@ -0,0 +1,64 @@
+<template>
+  <ContentDrawer
+      position="right"
+      :show="true"
+      overlay
+      content-class="h-full"
+      title=""
+      @update:show="$emit('close')"
+  >
+    <div class="flex flex-col flex-nowrap h-full">
+      <div class="flex items-center px-6 py-4 border-b">
+        <div class="flex-grow">
+          <slot name="header" />
+        </div>
+
+        <div>
+          <QBtn @click="$emit('close')">
+            <CloseIcon class="w-4" />
+          </QBtn>
+        </div>
+      </div>
+      <div class="flex-grow overflow-hidden h-full">
+        <div class="flex items-stretch flex-nowrap h-full">
+          <div class="border-r w-[13.5em] overflow-y-auto">
+            <PanelsDrawerTabs
+                v-model="activePanel"
+                :panels="panels"
+                @update:model-value="$emit('update:model-value', $event)"
+            />
+          </div>
+          <PanelsDrawerPanels :panels="panels" :active-panel="activePanel" :class="panelsClass" />
+          <div v-if="$slots['right-sidebar']" class="border-l overflow-y-auto">
+            <slot name="right-sidebar" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </ContentDrawer>
+</template>
+<script setup>
+import { ref, watch } from 'vue';
+import { XIcon as CloseIcon } from '../../svg';
+import { ContentDrawer } from '../Utility';
+import { PanelsDrawerPanels, PanelsDrawerTabs } from './index';
+
+defineEmits(['update:model-value', 'close']);
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: null
+  },
+  panelsClass: {
+    type: [Object, String],
+    default: 'w-[35.5rem]'
+  },
+  panels: {
+    type: Array,
+    required: true
+  }
+});
+
+const activePanel = ref(props.modelValue);
+watch(() => props.modelValue, (value) => activePanel.value = value);
+</script>

package/src/components/PanelsDrawer/PanelsDrawerPanels.vue

@@ -0,0 +1,25 @@
+<template>
+  <QTabPanels
+    :model-value="activePanel"
+    class="overflow-y-auto bg-neutral-plus-7 h-full transition-all"
+  >
+    <QTabPanel v-for="panel in panels" :key="panel.name" :name="panel.name">
+      <RenderVnode v-if="panel.vnode" :vnode="panel.vnode" />
+    </QTabPanel>
+  </QTabPanels>
+</template>
+
+<script setup>
+import { RenderVnode } from "quasar-ui-danx";
+
+defineProps({
+  activePanel: {
+    type: String,
+    required: true
+  },
+  panels: {
+    type: Array,
+    required: true
+  }
+});
+</script>

package/src/components/PanelsDrawer/PanelsDrawerTabs.vue

@@ -0,0 +1,65 @@
+<template>
+  <QTabs
+    :model-value="modelValue"
+    vertical
+    align="left"
+    class="panel-tabs p-4 h-auto"
+    no-caps
+    @update:model-value="$emit('update:model-value', $event)"
+  >
+    <template v-for="panel in panels">
+      <template v-if="panel.enabled !== false">
+        <RenderVnode
+          v-if="panel.tabVnode"
+          :key="panel.name"
+          :vnode="panel.tabVnode"
+          :is-active="modelValue === panel.name"
+          :name="panel.name"
+          :label="panel.label"
+        />
+        <QTab v-else :key="panel.name" :name="panel.name" :label="panel.label" />
+      </template>
+    </template>
+  </QTabs>
+</template>
+<script setup>
+import { QTab } from "quasar";
+import { RenderVnode } from "quasar-ui-danx";
+
+defineEmits(["update:model-value"]);
+defineProps({
+  modelValue: {
+    type: String,
+    default: "general"
+  },
+  panels: {
+    type: Array,
+    required: true
+  }
+});
+</script>
+
+<style
+  lang="scss"
+  scoped
+>
+.panel-tabs {
+  :deep(.q-tab) {
+    justify-content: start !important;
+    padding: 0;
+    @apply text-left py-2.5 px-2 rounded-lg hover:bg-neutral-plus-6;
+
+    .q-focus-helper, .q-tab__indicator {
+      display: none;
+    }
+
+    .q-tab__content {
+      @apply p-0;
+    }
+  }
+
+  :deep(.q-tab.q-tab--active) {
+    @apply text-white bg-blue-base;
+  }
+}
+</style>

package/src/components/PanelsDrawer/index.ts

@@ -0,0 +1,3 @@
+export { default as PanelsDrawer } from "./PanelsDrawer.vue";
+export { default as PanelsDrawerPanels } from "./PanelsDrawerPanels.vue";
+export { default as PanelsDrawerTabs } from "./PanelsDrawerTabs.vue";

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

@@ -0,0 +1,28 @@
+<template>
+  <div class="previous-next-controls">
+    <QBtn
+        class="bg-neutral-plus-6 border-neutral-plus-4 border border-solid !rounded-r-none !p-2 !min-w-0"
+        :disable="isLoading"
+        :loading="isLoading"
+        @click="$emit('next', -1)"
+    >
+      <SkipPreviousIcon class="w-6" />
+    </QBtn>
+    <QBtn
+        class="bg-neutral-plus-6 border-neutral-plus-4 border border-solid border-l-0 !rounded-l-none !p-2 !min-w-0"
+        :disable="isLoading"
+        :loading="isLoading"
+        @click="$emit('next', 1)"
+    >
+      <SkipNextIcon class="w-6" />
+    </QBtn>
+  </div>
+</template>
+<script setup>
+import { SkipNextIcon, SkipPreviousIcon } from '../../../svg';
+
+defineEmits(['next']);
+defineProps({
+  isLoading: Boolean
+});
+</script>

package/src/components/Utility/Controls/index.ts

@@ -0,0 +1 @@
+export { default as PreviousNextControls } from "./PreviousNextControls.vue";

package/src/components/Utility/Formats/LabelValueFormat.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <div class="text-xs font-bold">{{ label }}</div>
+    <div :class="{'mt-2': !dense, 'mt-1': dense, 'text-no-wrap': nowrap}">
+      <slot>{{ value || "-" }}</slot>
+    </div>
+  </div>
+</template>
+<script setup>
+defineProps({
+  label: {
+    type: String,
+    required: true
+  },
+  value: {
+    type: [String, Number],
+    default: "-"
+  },
+  dense: Boolean,
+  nowrap: Boolean
+});
+</script>

package/src/components/Utility/Formats/index.ts

@@ -2,3 +2,4 @@ export { default as AddressFormat } from "./AddressFormat.vue";
 export { default as FlatListFormat } from "./FlatListFormat.vue";
 export { default as GpsCoordinatesFormat } from "./GpsCoordinatesFormat.vue";
 export { default as IconWithTextFormat } from "./IconWithTextFormat.vue";
+export { default as LabelValueFormat } from "./LabelValueFormat.vue";

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

@@ -0,0 +1,32 @@
+<template>
+  <q-tab
+      :name="name"
+      class="w-full"
+      content-class="w-full"
+  >
+    <div class="flex items-center w-full">
+      <div class="flex-grow text-sm">{{ label }}</div>
+      <q-badge
+          color="gray-base"
+          :label="count"
+          rounded
+      />
+    </div>
+  </q-tab>
+</template>
+<script setup>
+defineProps({
+  name: {
+    type: String,
+    required: true
+  },
+  label: {
+    type: String,
+    required: true
+  },
+  count: {
+    type: [String, Number],
+    default: ''
+  }
+});
+</script>

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

@@ -0,0 +1,40 @@
+<template>
+  <q-tab
+      :name="name"
+      class="w-full"
+      content-class="w-full"
+  >
+    <div class="flex items-center w-full">
+      <div class="flex-grow text-sm">{{ label }}</div>
+      <div>
+        <OverdueIcon
+            v-if="overdue"
+            class="w-5 ml-2"
+            :class="isActive ? 'text-white' : 'text-red-danger'"
+        />
+        <WarningIcon
+            v-else-if="warning"
+            class="text-yellow-warning w-5"
+        />
+      </div>
+    </div>
+  </q-tab>
+</template>
+<script setup>
+import { ExclamationCircleIcon as OverdueIcon } from '@heroicons/vue/solid';
+import { WarningIcon } from '../../../svg';
+
+defineProps({
+  name: {
+    type: String,
+    required: true
+  },
+  label: {
+    type: String,
+    required: true
+  },
+  overdue: Boolean,
+  warning: Boolean,
+  isActive: Boolean
+});
+</script>

package/src/components/Utility/Tabs/index.ts

@@ -0,0 +1,2 @@
+export { default as BadgeTab } from "./BadgeTab.vue";
+export { default as IndicatorTab } from "./IndicatorTab.vue";

package/src/components/Utility/index.ts

@@ -1,8 +1,10 @@
 export * from "./Buttons";
+export * from "./Controls";
 export * from "./Dialogs";
 export * from "./Files";
 export * from "./Formats";
 export * from "./Layouts";
 export * from "./Popovers";
+export * from "./Tabs";
 export * from "./Tools";
 export * from "./Transitions";

package/src/components/index.ts

@@ -1,3 +1,5 @@
 export * from "./ActionTable";
-export * from "./Utility";
+export * from "./AuditHistory";
 export * from "./DragAndDrop";
+export * from "./PanelsDrawer";
+export * from "./Utility";

package/src/svg/SkipNextIcon.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path d="M16.5 18V6H18.5V18H16.5ZM5.5 18V6L14.5 12L5.5 18Z" fill="currentColor"/>
+  </g>
+</svg>

package/src/svg/SkipPreviousIcon.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path d="M5.5 18V6H7.5V18H5.5ZM18.5 18L9.5 12L18.5 6V18Z" fill="currentColor"/>
+  </g>
+</svg>

package/src/svg/WarningIcon.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M0 18.2727L10 1L20 18.2727H0ZM3.13636 16.4545H16.8636L10 4.63636L3.13636 16.4545ZM10 15.5455C10.2576 15.5455 10.4736 15.4582 10.6482 15.2836C10.8221 15.1097 10.9091 14.8939 10.9091 14.6364C10.9091 14.3788 10.8221 14.163 10.6482 13.9891C10.4736 13.8145 10.2576 13.7273 10 13.7273C9.74242 13.7273 9.52667 13.8145 9.35273 13.9891C9.17818 14.163 9.09091 14.3788 9.09091 14.6364C9.09091 14.8939 9.17818 15.1097 9.35273 15.2836C9.52667 15.4582 9.74242 15.5455 10 15.5455ZM9.09091 12.8182H10.9091V8.27273H9.09091V12.8182Z"
+    fill="currentColor"/>
+</svg>

package/src/svg/index.ts

@@ -4,5 +4,8 @@ export { default as FilterIcon } from "./FilterIcon.svg";
 export { default as ImageIcon } from "./ImageIcon.svg";
 export { default as PdfIcon } from "./PdfIcon.svg";
 export { default as PercentIcon } from "./PercentIcon.svg";
+export { default as SkipNextIcon } from "./SkipNextIcon.svg";
+export { default as SkipPreviousIcon } from "./SkipPreviousIcon.svg";
 export { default as TrashIcon } from "./TrashIcon.svg";
+export { default as WarningIcon } from "./WarningIcon.svg";
 export { default as XIcon } from "./XIcon.svg";