quasar-ui-danx 0.4.12 → 0.4.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.4.12",
+  "version": "0.4.13",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",
@@ -57,7 +57,8 @@
     "danx-icon": "^1.0.2",
     "exifreader": "^4.21.1",
     "gsap": "^3.12.5",
-    "luxon": "^3.4.4"
+    "luxon": "^3.4.4",
+    "yaml": "^2.4.5"
   },
   "browserslist": [
     "last 4 Chrome versions",

package/src/components/ActionTable/Form/RenderedForm.vue

@@ -62,32 +62,36 @@
         </QTab>
       </QTabs>
     </div>
-    <div
+    <template
       v-for="(field, index) in mappedFields"
       :key="field.id"
-      :class="{ 'mt-4': index > 0, [fieldClass]: true }"
     >
-      <RenderVnode
-        v-if="field.vnode"
-        :vnode="field.vnode"
-        :field="field"
-        :props="getVnodeProps(field)"
-        @update:model-value="onInput(field.name, $event)"
-      />
-      <Component
-        :is="field.component"
-        :key="field.name + '-' + currentVariation"
-        :model-value="getFieldValue(field.name)"
-        :field="field"
-        :label="field.label || undefined"
-        :no-label="noLabel"
-        :show-name="showName"
-        :clearable="field.clearable || clearable"
-        :disable="disable"
-        :readonly="readonly"
-        @update:model-value="onInput(field.name, $event)"
-      />
-    </div>
+      <div
+        v-show="isFieldEnabled(field)"
+        :class="{ 'mt-4': index > 0, [fieldClass]: true }"
+      >
+        <RenderVnode
+          v-if="field.vnode"
+          :vnode="field.vnode"
+          :props="getVnodeProps(field)"
+          :params="fieldInputs"
+          @update:model-value="onInput(field.name, $event)"
+        />
+        <Component
+          :is="field.component"
+          :key="field.name + '-' + currentVariation"
+          :model-value="getFieldValue(field.name)"
+          :field="field"
+          :label="field.label || undefined"
+          :no-label="noLabel"
+          :show-name="showName"
+          :clearable="field.clearable || clearable"
+          :disable="disable"
+          :readonly="readonly"
+          @update:model-value="onInput(field.name, $event)"
+        />
+      </div>
+    </template>
     <div
       v-if="savedAt"
       :class="savingClass"
@@ -136,7 +140,7 @@ import { ExclamationCircleIcon as MissingIcon, PencilIcon as EditIcon } from "@h
 import { computed, ref } from "vue";
 import { fDateTime, FlashMessages, incrementName, replace } from "../../../helpers";
 import { TrashIcon as RemoveIcon } from "../../../svg";
-import { AnyObject, Form, FormFieldValue } from "../../../types";
+import { AnyObject, FormFieldValue, RenderedFormProps } from "../../../types";
 import { ConfirmDialog, RenderVnode } from "../../Utility";
 import {
 	BooleanField,
@@ -150,22 +154,6 @@ import {
 	WysiwygField
 } from "./Fields";
 
-export interface RenderedFormProps {
-	values?: FormFieldValue[] | object | null;
-	form: Form;
-	noLabel?: boolean;
-	showName?: boolean;
-	disable?: boolean;
-	readonly?: boolean;
-	saving?: boolean;
-	clearable?: boolean;
-	emptyValue?: string | number | boolean;
-	canModifyVariations?: boolean;
-	fieldClass?: string;
-	savingClass?: string;
-	savedAt?: string;
-}
-
 const props = withDefaults(defineProps<RenderedFormProps>(), {
 	values: null,
 	emptyValue: undefined,
@@ -190,9 +178,9 @@ const FORM_FIELD_MAP = {
 
 const mappedFields = props.form.fields.map((field) => ({
 	placeholder: `Enter ${field.label}`,
+	default: field.type === "BOOLEAN" ? false : "",
 	...field,
-	component: field.component || FORM_FIELD_MAP[field.type],
-	default: field.type === "BOOLEAN" ? false : ""
+	component: field.component || FORM_FIELD_MAP[field.type]
 }));
 
 const fieldResponses = computed(() => {
@@ -201,6 +189,24 @@ const fieldResponses = computed(() => {
 	return Object.entries(props.values).map(([name, value]) => ({ name, value, variation: "" }));
 });
 
+const fieldInputs = computed(() => {
+	const inputs: AnyObject = {};
+	for (const field of mappedFields) {
+		inputs[field.name] = getFieldValue(field.name);
+	}
+	return inputs;
+});
+
+function isFieldEnabled(field) {
+	if (field.enabled === undefined) return true;
+
+	if (typeof field.enabled === "function") {
+		return field.enabled(fieldInputs.value);
+	}
+
+	return field.enabled;
+}
+
 function getVnodeProps(field) {
 	return {
 		modelValue: getFieldValue(field.name),

package/src/components/PanelsDrawer/PanelsDrawer.vue

@@ -1,7 +1,7 @@
 <template>
   <ContentDrawer
     position="right"
-    :show="true"
+    show
     overlay
     content-class="h-full"
     class="dx-panels-drawer"
@@ -13,7 +13,13 @@
       <div class="dx-panels-drawer-header flex items-center px-6 py-4">
         <div class="flex-grow">
           <slot name="header">
-            <h2>{{ title }}</h2>
+            <h2 v-if="title">
+              {{ title }}
+            </h2>
+            <div v-if="!activeItem">
+              Loading
+              <QSpinnerHourglass />
+            </div>
           </slot>
         </div>
         <div
@@ -32,10 +38,14 @@
         </div>
       </div>
       <div class="dx-panels-drawer-body flex-grow overflow-hidden h-full">
-        <div class="flex items-stretch flex-nowrap h-full">
+        <div
+          v-if="activeItem.__timestamp > 0"
+          class="flex items-stretch flex-nowrap h-full"
+        >
           <PanelsDrawerTabs
             :key="'pd-tabs:' + activeItem.id"
             v-model="activePanel"
+            :active-item="activeItem"
             :class="tabsClass"
             :panels="panels"
             @update:model-value="$emit('update:model-value', $event)"
@@ -44,6 +54,7 @@
             :key="'pd-panels:' + activeItem.id"
             :panels="panels"
             :active-panel="activePanel"
+            :active-item="activeItem"
             :class="activePanelOptions?.class || panelsClass"
           />
           <div
@@ -68,7 +79,7 @@ import PanelsDrawerTabs from "./PanelsDrawerTabs";
 export interface Props {
 	title?: string,
 	modelValue?: string | number,
-	activeItem?: ActionTargetItem;
+	activeItem: ActionTargetItem;
 	tabsClass?: string | object,
 	panelsClass?: string | object,
 	panels: ActionPanel[]
@@ -78,7 +89,6 @@ defineEmits(["update:model-value", "close"]);
 const props = withDefaults(defineProps<Props>(), {
 	title: "",
 	modelValue: null,
-	activeItem: null,
 	tabsClass: "w-[13.5rem]",
 	panelsClass: "w-[35.5rem]"
 });

package/src/components/PanelsDrawer/PanelsDrawerPanels.vue

@@ -11,17 +11,19 @@
       <RenderVnode
         v-if="panel.vnode"
         :vnode="panel.vnode"
+        :props="activeItem"
       />
     </QTabPanel>
   </QTabPanels>
 </template>
 
 <script setup lang="ts">
-import { ActionPanel } from "../../types";
+import { ActionPanel, ActionTargetItem } from "../../types";
 import { RenderVnode } from "../Utility";
 
 defineProps<{
 	activePanel?: string | number,
+	activeItem: ActionTargetItem,
 	panels: ActionPanel[]
 }>();
 </script>

package/src/components/PanelsDrawer/PanelsDrawerTabs.vue

@@ -9,11 +9,11 @@
     @update:model-value="$emit('update:model-value', $event)"
   >
     <template v-for="panel in panels">
-      <template v-if="panel.enabled === undefined || !!panel.enabled">
+      <template v-if="isEnabled(panel)">
         <RenderVnode
           v-if="panel.tabVnode"
           :key="panel.name"
-          :vnode="panel.tabVnode(modelValue)"
+          :vnode="panel.tabVnode(activeItem, modelValue)"
           :is-active="modelValue === panel.name"
           :name="panel.name"
           :label="panel.label"
@@ -30,19 +30,32 @@
 </template>
 <script setup lang="ts">
 import { QTab } from "quasar";
-import { ActionPanel } from "../../types";
+import { ActionPanel, ActionTargetItem } from "../../types";
 import { RenderVnode } from "../Utility";
 
 defineEmits(["update:model-value"]);
 
 interface Props {
 	modelValue?: string | number;
+	activeItem: ActionTargetItem;
 	panels: ActionPanel[];
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
 	modelValue: "general"
 });
+
+function isEnabled(panel) {
+	if (panel.enabled === undefined) return true;
+
+	if (!panel.enabled) return false;
+
+	if (typeof panel.enabled === "function") {
+		return panel.enabled(props.activeItem);
+	}
+
+	return true;
+}
 </script>
 
 <style lang="scss" module="cls">

package/src/components/Utility/Tools/RenderVnode.vue

@@ -11,7 +11,7 @@ const RenderVnode = (props) => {
 	}
 
 	if (typeof props.vnode === "function") {
-		return props.vnode(props.props);
+		return props.vnode(props.props, props.params);
 	}
 
 	return null;
@@ -24,6 +24,10 @@ RenderVnode.props = {
 	props: {
 		type: Object,
 		default: () => ({})
+	},
+	params: {
+		type: Object,
+		default: null
 	}
 };
 export default RenderVnode;

package/src/helpers/date.ts

@@ -1,5 +1,5 @@
 import { parseDateTime } from "./formats";
 
-export function diffInDays(date1, date2) {
-    return parseDateTime(date2).diff(parseDateTime(date1), ["days"]).days;
+export function diffInDays(date1: string, date2: string) {
+	return parseDateTime(date2).diff(parseDateTime(date1), ["days"]).days;
 }

package/src/helpers/formats.ts

@@ -1,4 +1,5 @@
 import { DateTime, IANAZone } from "luxon";
+import { parse as parseYAML, stringify as stringifyYAML } from "yaml";
 import { ActionTargetItem, fDateOptions } from "../types";
 import { isJSON } from "./utils";
 
@@ -335,10 +336,56 @@ export function fJSON(string: string | object) {
 	}
 }
 
-export function fMarkdownJSON(string: string | object): string {
-	if (isJSON(string)) {
-		return `\`\`\`json\n${fJSON(string)}\n\`\`\``;
+/**
+ * Convert markdown formatted string into a valid JSON object
+ */
+export function parseMarkdownJSON(string: string | object): object | null | undefined {
+	if (typeof string === "object") return string as object;
+
+	try {
+		return JSON.parse(parseMarkdownCode(string));
+	} catch (e) {
+		return undefined;
 	}
-	// @ts-expect-error Guaranteed to only allow strings here using isJSON check
-	return string;
+}
+
+export function parseMarkdownYAML(string: string): object | null | undefined {
+	try {
+		return parseYAML(parseMarkdownCode(string)) || (string ? undefined : null);
+	} catch (e) {
+		return undefined;
+	}
+}
+
+/**
+ * Parse a markdown formatted string and return the code block content
+ */
+export function parseMarkdownCode(string: string): string {
+	return string.replace(/^```[a-z0-9]{1,6}\s/, "").replace(/```$/, "");
+}
+
+/**
+ * Convert a JSON object or string of code into a markdown formatted JSON string
+ * ie: a valid JSON string with a ```json prefix and ``` postfix
+ */
+export function fMarkdownCode(type: string, string: string | object): string {
+	if (typeof string === "object" || isJSON(string)) {
+		switch (type) {
+			case "yaml":
+				string = stringifyYAML(string);
+				break;
+			case "ts":
+				string = "";
+				break;
+			default:
+				string = fJSON(string);
+		}
+	}
+
+	const regex = new RegExp(`\`\`\`${type}`, "g");
+	if (!((string || "") as string).match(regex)) {
+		return `\`\`\`${type}\n${string}\n\`\`\``;
+	}
+
+	return string as string;
 }

package/src/helpers/utils.ts

@@ -91,12 +91,12 @@ export function incrementName(name: string) {
  * Check if a string is a valid JSON object. If an object is passed, always return true
  */
 export function isJSON(string: string | object) {
-	if (!string) {
-		return false;
-	}
 	if (typeof string === "object") {
 		return true;
 	}
+	if (!string) {
+		return false;
+	}
 	try {
 		JSON.parse(string);
 		return true;

package/src/types/actions.d.ts

@@ -6,9 +6,9 @@ export interface ActionPanel {
 	label: string;
 	category?: string;
 	class?: string | object;
-	enabled?: boolean | (() => boolean);
-	tabVnode?: (activePanel: string | number) => VNode | any;
-	vnode: (activePanel: string) => VNode | any;
+	enabled?: boolean | ((activeItem: ActionTargetItem) => boolean);
+	tabVnode?: (activeItem: ActionTargetItem | null | undefined, activePanel: string | number) => VNode | any;
+	vnode: (activeItem: ActionTargetItem | null | undefined) => VNode | any;
 }
 
 export interface ActionTargetItem extends TypedObject {

package/src/types/forms.d.ts

@@ -1,4 +1,5 @@
 import { VNode } from "vue";
+import { AnyObject } from "./shared";
 
 export interface FormFieldOption {
 	value: string;
@@ -11,7 +12,8 @@ export interface FormField {
 	name: string;
 	label: string;
 	placeholder?: string;
-	vnode?: ((props) => VNode | any);
+	enabled?: boolean | ((input: AnyObject) => boolean);
+	vnode?: ((field: FormFieldOption, input?: AnyObject) => VNode | any);
 	component?: any;
 	clearable?: boolean;
 	required?: boolean;
@@ -35,3 +37,19 @@ export interface FormFieldValue {
 	value: any,
 	variation?: string
 }
+
+export interface RenderedFormProps {
+	values?: FormFieldValue[] | object | null;
+	form: Form;
+	noLabel?: boolean;
+	showName?: boolean;
+	disable?: boolean;
+	readonly?: boolean;
+	saving?: boolean;
+	clearable?: boolean;
+	emptyValue?: string | number | boolean;
+	canModifyVariations?: boolean;
+	fieldClass?: string;
+	savingClass?: string;
+	savedAt?: string;
+}