quasar-ui-danx 0.4.95 → 0.4.99

package/package.json

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

package/src/components/Utility/Buttons/ActionButton.vue

@@ -78,14 +78,16 @@ import {
   FaSolidPlay as PlayIcon,
   FaSolidPlus as CreateIcon,
   FaSolidStop as StopIcon,
-  FaSolidTrash as TrashIcon
+  FaSolidTrash as TrashIcon,
+  FaSolidUsers as UsersIcon,
+  FaSolidXmark as CloseIcon
 } from "danx-icon";
 import { computed, ref } from "vue";
 import { ActionTarget, ResourceAction } from "../../../types";
 
 export interface ActionButtonProps {
-  type?: "save" | "trash" | "back" | "create" | "edit" | "copy" | "folder" | "document" | "play" | "stop" | "pause" | "refresh" | "restart" | "confirm" | "cancel" | "export" | "import" | "minus" | "merge" | "check" | "clock" | "view" | "database";
-  color?: "red" | "blue" | "blue-invert" | "sky" | "sky-invert" | "green" | "green-invert" | "lime" | "white" | "gray" | "slate" | "slate-invert" | "yellow" | "orange" | "purple" | "teal" | "teal-invert";
+  type?: "save" | "trash" | "back" | "create" | "edit" | "copy" | "folder" | "document" | "play" | "stop" | "pause" | "refresh" | "restart" | "confirm" | "cancel" | "export" | "import" | "minus" | "merge" | "check" | "clock" | "view" | "database" | "users" | "close";
+  color?: "red" | "blue" | "blue-invert" | "sky" | "sky-invert" | "green" | "green-invert" | "lime" | "white" | "gray" | "slate" | "slate-invert" | "yellow" | "orange" | "amber" | "purple" | "teal" | "teal-invert";
   size?: "xxs" | "xs" | "sm" | "md" | "lg";
   icon?: object | string;
   iconClass?: string;
@@ -179,6 +181,8 @@ const colorClass = computed(() => {
       return "text-yellow-300 bg-yellow-800 hover:bg-yellow-700";
     case "orange":
       return "text-orange-400 bg-orange-900 hover:bg-orange-800";
+    case "amber":
+      return "text-amber-900 bg-amber-300 hover:bg-amber-400";
     case "gray":
       return "text-slate-200 bg-slate-800 hover:bg-slate-900";
     case "slate":
@@ -242,6 +246,10 @@ const typeOptions = computed(() => {
       return { icon: ViewIcon };
     case "database":
       return { icon: DatabaseIcon };
+    case "users":
+      return { icon: UsersIcon };
+    case "close":
+      return { icon: CloseIcon };
     default:
       return { icon: EditIcon };
   }

package/src/components/Utility/Code/CodeViewer.vue

@@ -0,0 +1,219 @@
+<template>
+  <div
+    class="dx-code-viewer group flex flex-col"
+    :class="{ 'is-collapsed': isCollapsed }"
+  >
+    <FieldLabel
+      v-if="label"
+      class="mb-2 text-sm flex-shrink-0"
+      :label="label"
+    />
+
+    <!-- Collapsed view - inline preview -->
+    <CodeViewerCollapsed
+      v-if="collapsible && isCollapsed"
+      :preview="collapsedPreview"
+      :format="currentFormat"
+      :available-formats="currentFormat === 'json' || currentFormat === 'yaml' ? ['json', 'yaml'] : currentFormat === 'text' || currentFormat === 'markdown' ? ['text', 'markdown'] : []"
+      @expand="toggleCollapse"
+      @format-change="onFormatChange"
+    />
+
+    <!-- Expanded view - full code viewer -->
+    <template v-else>
+      <div class="code-wrapper relative flex flex-col flex-1 min-h-0">
+        <!-- Language badge - shows popout format options on hover -->
+        <LanguageBadge
+          :format="currentFormat"
+          :available-formats="currentFormat === 'json' || currentFormat === 'yaml' ? ['json', 'yaml'] : currentFormat === 'text' || currentFormat === 'markdown' ? ['text', 'markdown'] : []"
+          :toggleable="true"
+          @click.stop
+          @change="onFormatChange"
+        />
+
+        <!-- Collapse button (when collapsible and expanded) -->
+        <div
+          v-if="collapsible"
+          class="collapse-toggle absolute top-0 left-0 p-1 cursor-pointer z-10 text-gray-500 hover:text-gray-300"
+          @click="toggleCollapse"
+        >
+          <CollapseIcon class="w-3 h-3" />
+        </div>
+
+        <!-- Clickable header to collapse when expanded -->
+        <div
+          v-if="collapsible"
+          class="collapse-header"
+          @click="toggleCollapse"
+        />
+
+        <!-- Code display - readonly with syntax highlighting (non-markdown formats) -->
+        <pre
+          v-if="!editor.isEditing.value && currentFormat !== 'markdown'"
+          class="code-content dx-scrollbar flex-1 min-h-0"
+          :class="[editorClass, { 'is-collapsible': collapsible }]"
+        ><code :class="'language-' + currentFormat" v-html="editor.highlightedContent.value"></code></pre>
+
+        <!-- Markdown display - rendered HTML -->
+        <MarkdownContent
+          v-else-if="currentFormat === 'markdown' && !editor.isEditing.value"
+          :content="markdownSource"
+          :default-code-format="defaultCodeFormat"
+          class="code-content dx-scrollbar flex-1 min-h-0"
+          :class="[editorClass, { 'is-collapsible': collapsible }]"
+        />
+
+        <!-- Code editor - contenteditable, content set imperatively to avoid cursor reset -->
+        <pre
+          v-else
+          ref="codeRef"
+          class="code-content dx-scrollbar flex-1 min-h-0 is-editable"
+          :class="[editorClass, 'language-' + currentFormat, { 'is-collapsible': collapsible }]"
+          contenteditable="true"
+          @input="editor.onContentEditableInput"
+          @blur="editor.onContentEditableBlur"
+          @keydown="editor.onKeyDown"
+        ></pre>
+
+        <!-- Footer with char count and edit toggle -->
+        <CodeViewerFooter
+          :char-count="editor.charCount.value"
+          :validation-error="editor.validationError.value"
+          :can-edit="canEdit && currentFormat !== 'markdown'"
+          :is-editing="editor.isEditing.value"
+          @toggle-edit="editor.toggleEdit"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FaSolidChevronDown as CollapseIcon } from "danx-icon";
+import { computed, ref, toRef, watch } from "vue";
+import { useCodeFormat, CodeFormat } from "../../../composables/useCodeFormat";
+import { useCodeViewerCollapse } from "../../../composables/useCodeViewerCollapse";
+import { useCodeViewerEditor } from "../../../composables/useCodeViewerEditor";
+import FieldLabel from "../../ActionTable/Form/Fields/FieldLabel.vue";
+import CodeViewerCollapsed from "./CodeViewerCollapsed.vue";
+import CodeViewerFooter from "./CodeViewerFooter.vue";
+import LanguageBadge from "./LanguageBadge.vue";
+import MarkdownContent from "./MarkdownContent.vue";
+
+export interface CodeViewerProps {
+	modelValue?: object | string | null;
+	format?: CodeFormat;
+	label?: string;
+	editorClass?: string;
+	canEdit?: boolean;
+	editable?: boolean;
+	collapsible?: boolean;
+	defaultCollapsed?: boolean;
+	defaultCodeFormat?: "json" | "yaml";
+}
+
+const props = withDefaults(defineProps<CodeViewerProps>(), {
+	modelValue: null,
+	format: "yaml",
+	label: "",
+	editorClass: "",
+	canEdit: false,
+	editable: false,
+	collapsible: false,
+	defaultCollapsed: true
+});
+
+const emit = defineEmits<{
+	"update:modelValue": [value: object | string | null];
+	"update:format": [format: CodeFormat];
+	"update:editable": [editable: boolean];
+}>();
+
+// Initialize composable with current props
+const codeFormat = useCodeFormat({
+	initialFormat: props.format,
+	initialValue: props.modelValue
+});
+
+// Local state
+const currentFormat = ref<CodeFormat>(props.format);
+const codeRef = ref<HTMLPreElement | null>(null);
+
+// Collapsed state (for collapsible mode)
+const isCollapsed = ref(props.collapsible && props.defaultCollapsed);
+
+// Watch for changes to defaultCollapsed prop
+watch(() => props.defaultCollapsed, (newValue) => {
+	if (props.collapsible) {
+		isCollapsed.value = newValue;
+	}
+});
+
+// Toggle collapsed state
+function toggleCollapse() {
+	isCollapsed.value = !isCollapsed.value;
+}
+
+// Sync composable format with current format
+watch(currentFormat, (newFormat) => {
+	codeFormat.setFormat(newFormat);
+});
+
+// Watch for external format changes
+watch(() => props.format, (newFormat) => {
+	currentFormat.value = newFormat;
+});
+
+// Watch for external value changes
+watch(() => props.modelValue, () => {
+	codeFormat.setValue(props.modelValue);
+	editor.syncEditingContentFromValue();
+});
+
+// Initialize editor composable
+const editor = useCodeViewerEditor({
+	codeRef,
+	codeFormat,
+	currentFormat,
+	canEdit: toRef(props, "canEdit"),
+	editable: toRef(props, "editable"),
+	onEmitModelValue: (value) => emit("update:modelValue", value),
+	onEmitEditable: (editable) => emit("update:editable", editable)
+});
+
+// Sync internal editable state with prop
+watch(() => props.editable, (newValue) => {
+	editor.syncEditableFromProp(newValue);
+});
+
+// Initialize collapse composable
+const { collapsedPreview } = useCodeViewerCollapse({
+	modelValue: toRef(props, "modelValue"),
+	format: currentFormat,
+	displayContent: editor.displayContent,
+	codeFormat
+});
+
+// Switch between JSON and YAML formats
+function onFormatChange(newFormat: CodeFormat) {
+	currentFormat.value = newFormat;
+	emit("update:format", newFormat);
+	editor.updateEditingContentOnFormatChange();
+}
+
+// Get the raw markdown content for MarkdownContent component
+const markdownSource = computed(() => {
+	if (typeof props.modelValue === "string") {
+		return props.modelValue;
+	}
+	return editor.displayContent.value;
+});
+
+// Expose isValid for external consumers
+const isValid = computed(() => editor.isValid.value);
+
+// Expose for parent components that may need to check validity
+defineExpose({ isValid });
+</script>
+
+<!-- Styles moved to global theme: src/styles/themes/danx/code.scss -->

package/src/components/Utility/Code/CodeViewerCollapsed.vue

@@ -0,0 +1,34 @@
+<template>
+    <div
+      class="code-collapsed relative flex items-center cursor-pointer"
+      @click="$emit('expand')"
+    >
+      <CollapseExpandIcon class="w-3 h-3 mr-2 flex-shrink-0 text-gray-500" />
+      <code class="code-collapsed-preview flex-1 min-w-0 truncate" v-html="preview" />
+
+      <!-- Language badge - stop propagation to prevent expand when clicking -->
+      <LanguageBadge
+        :format="format"
+        :available-formats="availableFormats"
+        :toggleable="availableFormats.length > 1"
+        @click.stop
+        @change="(fmt) => $emit('format-change', fmt)"
+      />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FaSolidChevronRight as CollapseExpandIcon } from "danx-icon";
+import LanguageBadge from "./LanguageBadge.vue";
+
+defineProps<{
+	preview: string;
+	format: string;
+	availableFormats?: string[];
+}>();
+
+defineEmits<{
+	expand: [];
+	"format-change": [format: string];
+}>();
+</script>

package/src/components/Utility/Code/CodeViewerFooter.vue

@@ -0,0 +1,53 @@
+<template>
+  <div
+    class="code-footer flex items-center justify-between px-2 py-1 flex-shrink-0"
+    :class="{ 'has-error': hasError }"
+  >
+    <div class="text-xs flex-1 min-w-0" :class="hasError ? 'text-red-400' : 'text-gray-500'">
+      <template v-if="validationError">
+        <span class="font-medium">
+          Error<template v-if="validationError.line"> (line {{ validationError.line }})</template>:
+        </span>
+        <span class="truncate">{{ validationError.message }}</span>
+      </template>
+      <template v-else>
+        {{ charCount.toLocaleString() }} chars
+      </template>
+    </div>
+    <!-- Edit toggle button -->
+    <QBtn
+      v-if="canEdit"
+      flat
+      dense
+      round
+      size="sm"
+      class="text-gray-500 hover:text-gray-700"
+      :class="{ 'text-sky-500 hover:text-sky-600': isEditing }"
+      @click="$emit('toggle-edit')"
+    >
+      <EditIcon class="w-3.5 h-3.5" />
+      <QTooltip>{{ isEditing ? 'Exit edit mode' : 'Edit content' }}</QTooltip>
+    </QBtn>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FaSolidPencil as EditIcon } from "danx-icon";
+import { computed } from "vue";
+import { ValidationError } from "../../../composables/useCodeFormat";
+
+export interface CodeViewerFooterProps {
+	charCount: number;
+	validationError: ValidationError | null;
+	canEdit: boolean;
+	isEditing: boolean;
+}
+
+const props = defineProps<CodeViewerFooterProps>();
+
+defineEmits<{
+	"toggle-edit": [];
+}>();
+
+const hasError = computed(() => props.validationError !== null);
+</script>

package/src/components/Utility/Code/LanguageBadge.vue

@@ -0,0 +1,122 @@
+<template>
+  <div
+    class="dx-language-badge-container"
+    :class="{ 'is-toggleable': toggleable && availableFormats.length > 1 }"
+    @mouseenter="showOptions = true"
+    @mouseleave="showOptions = false"
+  >
+    <!-- Other format options (slide out to the left) -->
+    <transition name="slide-left">
+      <div
+        v-if="showOptions && toggleable && otherFormats.length > 0"
+        class="dx-language-options"
+      >
+        <div
+          v-for="fmt in otherFormats"
+          :key="fmt"
+          class="dx-language-option"
+          @click.stop="$emit('change', fmt)"
+        >
+          {{ fmt.toUpperCase() }}
+        </div>
+      </div>
+    </transition>
+
+    <!-- Current format badge (stays in place) -->
+    <div class="dx-language-badge" :class="{ 'is-active': showOptions && otherFormats.length > 0 }">
+      {{ format.toUpperCase() }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+export interface LanguageBadgeProps {
+  format: string;
+  availableFormats?: string[];
+  toggleable?: boolean;
+}
+
+const props = withDefaults(defineProps<LanguageBadgeProps>(), {
+  availableFormats: () => [],
+  toggleable: true
+});
+
+defineEmits<{
+  change: [format: string];
+}>();
+
+const showOptions = ref(false);
+
+// Get formats other than the current one
+const otherFormats = computed(() => {
+  return props.availableFormats.filter(f => f !== props.format);
+});
+</script>
+
+<style lang="scss">
+.dx-language-badge-container {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  z-index: 10;
+
+  &.is-toggleable {
+    cursor: pointer;
+  }
+}
+
+.dx-language-options {
+  display: flex;
+  align-items: center;
+}
+
+.dx-language-option {
+  padding: 2px 8px;
+  font-size: 0.7em;
+  background: rgba(0, 0, 0, 0.5);
+  color: rgba(255, 255, 255, 0.7);
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: all 0.2s;
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.7);
+    color: rgba(255, 255, 255, 0.95);
+  }
+
+  &:first-child {
+    border-radius: 6px 0 0 6px;
+  }
+}
+
+.dx-language-badge {
+  padding: 2px 8px;
+  font-size: 0.7em;
+  border-radius: 0 6px 0 6px;
+  background: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.6);
+  text-transform: uppercase;
+  transition: all 0.2s;
+
+  &.is-active {
+    border-radius: 0 6px 0 0;
+  }
+}
+
+// Slide animation for options
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: all 0.2s ease;
+}
+
+.slide-left-enter-from,
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translateX(10px);
+}
+</style>