quasar-ui-danx 0.5.1 → 0.5.2

package/package.json

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

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

@@ -8,14 +8,14 @@
   >
     <div class="flex items-center flex-nowrap">
       <component
+        v-if="icon || typeOptions.icon"
         :is="icon || typeOptions.icon"
         class="transition-all"
         :class="resolvedIconClass"
       />
       <div
         v-if="label || label === 0"
-        class="ml-2"
-        :class="labelClass"
+        :class="[labelClass, { 'ml-2': icon || typeOptions.icon }]"
       >
         {{ label }}
       </div>
@@ -87,7 +87,7 @@ 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" | "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";
+  color?: "red" | "blue" | "blue-invert" | "sky" | "sky-invert" | "sky-soft" | "green" | "green-invert" | "green-soft" | "lime" | "white" | "gray" | "slate" | "slate-invert" | "slate-soft" | "yellow" | "orange" | "amber" | "purple" | "blue-soft" | "red-soft" | "teal" | "teal-invert";
   size?: "xxs" | "xs" | "sm" | "md" | "lg";
   icon?: object | string;
   iconClass?: string;
@@ -126,7 +126,7 @@ const props = withDefaults(defineProps<ActionButtonProps>(), {
 const mappedSizeClass = {
   xxs: {
     icon: "w-2",
-    button: "px-.5 h-5"
+    button: "px-1 h-4 text-[10px]"
   },
   xs: {
     icon: "w-3",
@@ -157,16 +157,22 @@ const colorClass = computed(() => {
   switch (props.color) {
     case "red":
       return "text-red-900 bg-red-300 hover:bg-red-400";
+    case "red-soft":
+      return "text-red-700 bg-red-100 hover:bg-red-200";
     case "lime":
       return "text-lime-900 bg-lime-300 hover:bg-lime-400";
     case "green":
       return "text-green-900 bg-green-300 hover:bg-green-400";
     case "green-invert":
       return "text-green-300 bg-green-900 hover:bg-green-800";
+    case "green-soft":
+      return "text-green-700 bg-green-100 hover:bg-green-200";
     case "blue":
       return "text-blue-900 bg-blue-300 hover:bg-blue-400";
     case "blue-invert":
       return "text-blue-300 bg-blue-900 hover:bg-blue-800";
+    case "blue-soft":
+      return "text-blue-700 bg-blue-100 hover:bg-blue-200";
     case "teal":
       return "text-teal-800 bg-teal-200 hover:bg-teal-400";
     case "teal-invert":
@@ -175,6 +181,8 @@ const colorClass = computed(() => {
       return "text-sky-900 bg-sky-300 hover:bg-sky-400";
     case "sky-invert":
       return "text-sky-400 bg-sky-800 hover:bg-sky-900";
+    case "sky-soft":
+      return "text-sky-700 bg-sky-100 hover:bg-sky-200";
     case "white":
       return "text-white bg-gray-800 hover:bg-gray-200";
     case "yellow":
@@ -189,6 +197,8 @@ const colorClass = computed(() => {
       return "text-slate-900 bg-slate-300 hover:bg-slate-400";
     case "slate-invert":
       return "text-slate-300 bg-slate-900 hover:bg-slate-800";
+    case "slate-soft":
+      return "text-slate-600 bg-slate-100 hover:bg-slate-200";
     case "purple":
       return "text-purple-300 bg-purple-900 hover:bg-purple-800";
     default:
@@ -251,7 +261,7 @@ const typeOptions = computed(() => {
     case "close":
       return { icon: CloseIcon };
     default:
-      return { icon: EditIcon };
+      return { icon: null };
   }
 });
 

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

@@ -1,7 +1,7 @@
 <template>
   <div
     class="dx-code-viewer group flex flex-col"
-    :class="{ 'is-collapsed': isCollapsed }"
+    :class="[{ 'is-collapsed': isCollapsed }, props.theme === 'light' ? 'theme-light' : '']"
   >
     <FieldLabel
       v-if="label"
@@ -84,10 +84,12 @@
 
         <!-- Footer with char count and edit toggle -->
         <CodeViewerFooter
+          v-if="!hideFooter"
           :char-count="editor.charCount.value"
           :validation-error="editor.validationError.value"
           :can-edit="canEdit && currentFormat !== 'markdown'"
           :is-editing="editor.isEditing.value"
+          :show-version="showVersion"
           @toggle-edit="editor.toggleEdit"
         />
       </div>
@@ -118,6 +120,9 @@ export interface CodeViewerProps {
 	defaultCollapsed?: boolean;
 	defaultCodeFormat?: "json" | "yaml";
 	allowAnyLanguage?: boolean;
+	theme?: "dark" | "light";
+	showVersion?: boolean;
+	hideFooter?: boolean;
 }
 
 const props = withDefaults(defineProps<CodeViewerProps>(), {
@@ -128,7 +133,10 @@ const props = withDefaults(defineProps<CodeViewerProps>(), {
 	canEdit: false,
 	editable: false,
 	collapsible: false,
-	defaultCollapsed: true
+	defaultCollapsed: true,
+	theme: "dark",
+	showVersion: false,
+	hideFooter: false
 });
 
 const emit = defineEmits<{

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

@@ -12,6 +12,7 @@
       </template>
       <template v-else>
         {{ charCount.toLocaleString() }} chars
+        <span v-if="showVersion" class="ml-2 text-sky-400">[v1.0.5]</span>
       </template>
     </div>
     <!-- Edit toggle button -->
@@ -41,6 +42,7 @@ export interface CodeViewerFooterProps {
 	validationError: ValidationError | null;
 	canEdit: boolean;
 	isEditing: boolean;
+	showVersion?: boolean;
 }
 
 const props = defineProps<CodeViewerFooterProps>();

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

@@ -9,29 +9,17 @@
       />
 
       <!-- Code blocks with syntax highlighting -->
-      <div
+      <CodeViewer
         v-else-if="token.type === 'code_block'"
-        class="dx-markdown-code-block"
-      >
-        <!-- Language toggle badge (only for json/yaml) -->
-        <LanguageBadge
-          v-if="isToggleableLanguage(token.language)"
-          :format="getCodeBlockFormat(index, token.language)"
-          :available-formats="['json', 'yaml']"
-          :toggleable="true"
-          @change="(fmt) => setCodeBlockFormat(index, fmt)"
-        />
-        <LanguageBadge
-          v-else-if="token.language"
-          :format="token.language"
-          :available-formats="[]"
-          :toggleable="false"
-        />
-        <pre><code
-          :class="'language-' + getCodeBlockFormat(index, token.language)"
-          v-html="highlightCodeBlock(index, token.content, token.language)"
-        ></code></pre>
-      </div>
+        :model-value="token.content"
+        :format="normalizeLanguage(token.language)"
+        :default-code-format="defaultCodeFormat"
+        :can-edit="false"
+        :collapsible="false"
+        hide-footer
+        allow-any-language
+        class="markdown-code-block"
+      />
 
       <!-- Blockquotes (recursive) -->
       <blockquote
@@ -186,12 +174,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, reactive } from "vue";
-import { parse as parseYAML, stringify as stringifyYAML } from "yaml";
+import { computed } from "vue";
 import { tokenizeBlocks, parseInline, renderMarkdown, getFootnotes, resetParserState } from "../../../helpers/formats/markdown";
 import type { BlockToken, ListItem } from "../../../helpers/formats/markdown";
-import { highlightJSON, highlightYAML } from "../../../helpers/formats/highlightSyntax";
-import LanguageBadge from "./LanguageBadge.vue";
+import CodeViewer from "./CodeViewer.vue";
 
 export interface MarkdownContentProps {
   content: string;
@@ -202,10 +188,21 @@ const props = withDefaults(defineProps<MarkdownContentProps>(), {
   content: ""
 });
 
-// Track format overrides for each code block (for toggling json<->yaml)
-const codeBlockFormats = reactive<Record<number, string>>({});
-// Cache converted content for each code block
-const convertedContent = reactive<Record<number, string>>({});
+// Normalize language aliases to standard names
+function normalizeLanguage(lang?: string): string {
+  if (!lang) return "text";
+  const aliases: Record<string, string> = {
+    js: "javascript",
+    ts: "typescript",
+    py: "python",
+    rb: "ruby",
+    yml: "yaml",
+    md: "markdown",
+    sh: "bash",
+    shell: "bash"
+  };
+  return aliases[lang.toLowerCase()] || lang.toLowerCase();
+}
 
 // Tokenize the markdown content
 const tokens = computed<BlockToken[]>(() => {
@@ -234,124 +231,6 @@ const sortedFootnotes = computed(() => {
     .map(([id, fn]) => ({ id, content: fn.content, index: fn.index }));
 });
 
-// Check if a language is toggleable (json or yaml)
-function isToggleableLanguage(language: string): boolean {
-  if (!language) return false;
-  const lang = language.toLowerCase();
-  return lang === "json" || lang === "yaml";
-}
-
-// Get the current format for a code block (respecting user toggle, then default override, then original)
-function getCodeBlockFormat(index: number, originalLanguage: string): string {
-  // If user has toggled this block, use their choice
-  if (codeBlockFormats[index]) {
-    return codeBlockFormats[index];
-  }
-
-  // If a default is set and this is a toggleable language, use the default
-  const lang = originalLanguage?.toLowerCase();
-  if (props.defaultCodeFormat && (lang === "json" || lang === "yaml")) {
-    return props.defaultCodeFormat;
-  }
-
-  // Otherwise use the original language
-  return lang || "text";
-}
-
-// Get converted content for a code block (handles initial conversion for defaultCodeFormat)
-function getConvertedContent(index: number, originalContent: string, originalLang: string): string {
-  const format = getCodeBlockFormat(index, originalLang);
-
-  // If format matches original, no conversion needed
-  if (format === originalLang || !isToggleableLanguage(originalLang)) {
-    return originalContent;
-  }
-
-  // Convert from original to target format
-  try {
-    let parsed: unknown;
-
-    if (originalLang === "json") {
-      parsed = JSON.parse(originalContent);
-    } else if (originalLang === "yaml") {
-      parsed = parseYAML(originalContent);
-    }
-
-    if (parsed !== undefined) {
-      if (format === "json") {
-        return JSON.stringify(parsed, null, 2);
-      } else if (format === "yaml") {
-        return stringifyYAML(parsed as object);
-      }
-    }
-  } catch {
-    // Conversion failed, return original
-  }
-
-  return originalContent;
-}
-
-// Set format for a code block (converts content to the new format)
-function setCodeBlockFormat(index: number, newFormat: string) {
-  const token = tokens.value[index];
-  if (token?.type !== "code_block") return;
-
-  const originalLang = token.language?.toLowerCase() || "json";
-  const current = getCodeBlockFormat(index, originalLang);
-
-  // No change needed if already in target format
-  if (current === newFormat) return;
-
-  // Convert the content
-  try {
-    // Use the currently displayed content (which may already be converted due to defaultCodeFormat)
-    const sourceContent = convertedContent[index] || getConvertedContent(index, token.content, originalLang);
-    let parsed: unknown;
-
-    // Parse from current format
-    if (current === "json") {
-      parsed = JSON.parse(sourceContent);
-    } else {
-      parsed = parseYAML(sourceContent);
-    }
-
-    // Convert to new format
-    if (newFormat === "json") {
-      convertedContent[index] = JSON.stringify(parsed, null, 2);
-    } else {
-      convertedContent[index] = stringifyYAML(parsed as object);
-    }
-
-    codeBlockFormats[index] = newFormat;
-  } catch {
-    // If conversion fails, just set the format without converting
-    codeBlockFormats[index] = newFormat;
-  }
-}
-
-// Highlight code block content based on format
-function highlightCodeBlock(index: number, originalContent: string, originalLanguage: string): string {
-  const format = getCodeBlockFormat(index, originalLanguage);
-  const originalLang = originalLanguage?.toLowerCase() || "text";
-
-  // Get the content (converted if needed, or from cache if user toggled)
-  const content = convertedContent[index] || getConvertedContent(index, originalContent, originalLang);
-
-  // Apply syntax highlighting
-  switch (format) {
-    case "json":
-      return highlightJSON(content);
-    case "yaml":
-      return highlightYAML(content);
-    default:
-      // For other languages, just escape HTML
-      return content
-        .replace(/&/g, "&amp;")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;");
-  }
-}
-
 // Parse inline markdown (bold, italic, links, etc.)
 function parseInlineContent(text: string): string {
   return parseInline(text, true);
@@ -383,23 +262,12 @@ function renderBlockquote(content: string): string {
 </script>
 
 <style lang="scss">
-.dx-markdown-code-block {
-  position: relative;
+.markdown-code-block {
   margin: 1em 0;
 
-  pre {
-    margin: 0;
-    background: rgba(0, 0, 0, 0.3);
-    padding: 1em;
-    border-radius: 6px;
-    overflow-x: auto;
-
-    code {
-      background: transparent;
-      padding: 0;
-      font-size: 0.875em;
-      font-family: 'Fira Code', 'Monaco', monospace;
-    }
+  // Ensure auto-height instead of 100%
+  &.dx-code-viewer {
+    height: auto;
   }
 }
 </style>

package/src/components/Utility/Markdown/MarkdownEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dx-markdown-editor" :class="{ 'is-readonly': readonly }">
+  <div class="dx-markdown-editor" :class="[{ 'is-readonly': readonly }, props.theme === 'light' ? 'theme-light' : '']">
     <div class="dx-markdown-editor-body" @contextmenu="contextMenu.show">
       <!-- Floating line type menu positioned next to current block -->
       <div
@@ -25,6 +25,7 @@
     </div>
 
     <MarkdownEditorFooter
+      v-if="!hideFooter"
       :char-count="editor.charCount.value"
       @show-hotkeys="editor.showHotkeyHelp"
     />
@@ -81,6 +82,8 @@ export interface MarkdownEditorProps {
   readonly?: boolean;
   minHeight?: string;
   maxHeight?: string;
+  theme?: "dark" | "light";
+  hideFooter?: boolean;
 }
 
 const props = withDefaults(defineProps<MarkdownEditorProps>(), {
@@ -88,7 +91,9 @@ const props = withDefaults(defineProps<MarkdownEditorProps>(), {
   placeholder: "Start typing...",
   readonly: false,
   minHeight: "100px",
-  maxHeight: "none"
+  maxHeight: "none",
+  theme: "dark",
+  hideFooter: false
 });
 
 const emit = defineEmits<{

package/src/components/Utility/Markdown/MarkdownEditorContent.vue

@@ -2,10 +2,10 @@
   <div
     ref="containerRef"
     class="dx-markdown-editor-content dx-markdown-content"
-    :class="{ 'is-readonly': readonly, 'is-empty': isEmpty }"
+    :class="{ 'is-readonly': readonly, 'is-empty': isContentEmpty }"
     :contenteditable="!readonly"
     :data-placeholder="placeholder"
-    @input="$emit('input')"
+    @input="onInput"
     @keydown="$emit('keydown', $event)"
     @blur="$emit('blur')"
     @click="handleClick"
@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { nextTick, ref, watch } from "vue";
 
 export interface MarkdownEditorContentProps {
   html: string;
@@ -27,13 +27,38 @@ const props = withDefaults(defineProps<MarkdownEditorContentProps>(), {
   placeholder: "Start typing..."
 });
 
-defineEmits<{
+const emit = defineEmits<{
   input: [];
   keydown: [event: KeyboardEvent];
   blur: [];
 }>();
 
 const containerRef = ref<HTMLElement | null>(null);
+const isContentEmpty = ref(true);
+
+/**
+ * Check if the editor content is empty by examining the actual DOM text content.
+ * This is needed because contenteditable changes the DOM directly without updating props.
+ */
+function checkIfEmpty(): void {
+  if (containerRef.value) {
+    const textContent = containerRef.value.textContent?.trim() || "";
+    isContentEmpty.value = textContent.length === 0;
+  }
+}
+
+/**
+ * Handle input events - check if content is empty and emit the input event.
+ */
+function onInput(): void {
+  checkIfEmpty();
+  emit("input");
+}
+
+// Watch for external HTML changes (e.g., from parent component)
+watch(() => props.html, () => {
+  nextTick(() => checkIfEmpty());
+}, { immediate: true });
 
 /**
  * Find the anchor element if the click target is inside one
@@ -74,10 +99,6 @@ function handleClick(event: MouseEvent): void {
   window.open(href, "_blank", "noopener,noreferrer");
 }
 
-const isEmpty = computed(() => {
-  return !props.html || props.html === "<p></p>" || props.html === "<p><br></p>";
-});
-
 // Expose containerRef for parent component
 defineExpose({ containerRef });
 </script>
@@ -231,5 +252,45 @@ defineExpose({ containerRef });
       }
     }
   }
+
+  // ==========================================
+  // LIGHT THEME VARIANT
+  // ==========================================
+  .dx-markdown-editor.theme-light & {
+    background-color: #f8fafc;
+    color: #1e293b;
+    caret-color: #1e293b;
+
+    &:focus {
+      border-color: rgba(14, 165, 233, 0.6);
+    }
+
+    &:hover:not(:focus):not(.is-readonly) {
+      border-color: rgba(14, 165, 233, 0.3);
+    }
+
+    // Placeholder styling - light theme
+    &.is-empty::before {
+      color: #94a3b8;
+    }
+
+    // Link tooltip - light theme
+    a:hover::after {
+      background: #e2e8f0;
+      color: #1e293b;
+    }
+
+    // Code block wrapper - light theme
+    .code-block-wrapper {
+      background: #f1f5f9;
+      border-color: #e2e8f0;
+
+      .dx-code-viewer {
+        .code-footer {
+          background: #e2e8f0;
+        }
+      }
+    }
+  }
 }
 </style>

package/src/components/Utility/Widgets/LabelPillWidget.vue

@@ -14,6 +14,7 @@ const props = withDefaults(defineProps<LabelPillWidgetProps>(), {
 });
 
 const colorClasses = {
+	// Dark theme colors (dark backgrounds with bright text)
 	sky: "bg-sky-950 text-sky-400",
 	green: "bg-green-950 text-green-400",
 	red: "bg-red-950 text-red-400",
@@ -33,6 +34,25 @@ const colorClasses = {
 	indigo: "bg-indigo-950 text-indigo-400",
 	violet: "bg-violet-950 text-violet-400",
 	fuchsia: "bg-fuchsia-950 text-fuchsia-400",
+	// Soft/light theme colors (light backgrounds with darker text)
+	"sky-soft": "bg-sky-100 text-sky-700",
+	"green-soft": "bg-green-100 text-green-700",
+	"red-soft": "bg-red-100 text-red-700",
+	"amber-soft": "bg-amber-100 text-amber-700",
+	"yellow-soft": "bg-yellow-100 text-yellow-700",
+	"blue-soft": "bg-blue-100 text-blue-700",
+	"purple-soft": "bg-purple-100 text-purple-700",
+	"slate-soft": "bg-slate-100 text-slate-600",
+	"gray-soft": "bg-gray-100 text-gray-600",
+	"emerald-soft": "bg-emerald-100 text-emerald-700",
+	"orange-soft": "bg-orange-100 text-orange-700",
+	"lime-soft": "bg-lime-100 text-lime-700",
+	"teal-soft": "bg-teal-100 text-teal-700",
+	"cyan-soft": "bg-cyan-100 text-cyan-700",
+	"rose-soft": "bg-rose-100 text-rose-700",
+	"indigo-soft": "bg-indigo-100 text-indigo-700",
+	"violet-soft": "bg-violet-100 text-violet-700",
+	"fuchsia-soft": "bg-fuchsia-100 text-fuchsia-700",
 	none: ""
 };