quasar-ui-danx 0.5.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",
@@ -15,6 +15,9 @@
     "build:bundle": "vite build",
     "build": "yarn clean && yarn build:types && yarn build:bundle",
     "preview": "vite preview",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
     "publish:patch": "./scripts/publish.sh patch",
     "publish:minor": "./scripts/publish.sh minor",
     "publish:major": "./scripts/publish.sh major"
@@ -34,6 +37,8 @@
     "@typescript-eslint/eslint-plugin": "^7.6.0",
     "@typescript-eslint/parser": "^7.6.0",
     "@vitejs/plugin-vue": "^5.0.4",
+    "@vitest/coverage-v8": "^4.0.16",
+    "@vue/test-utils": "^2.4.6",
     "autoprefixer": "^10.4.19",
     "chalk": "^4.1.0",
     "core-js": "^3.0.0",
@@ -42,6 +47,7 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-vue": "^9.24.1",
     "fs-extra": "^8.1.0",
+    "jsdom": "^27.4.0",
     "postcss": "^8.4.38",
     "quasar": "^2.0.0",
     "sass": "^1.33.0",
@@ -51,6 +57,7 @@
     "vite": "^5.2.8",
     "vite-plugin-dts": "^3.8.1",
     "vite-svg-loader": "^5.1.0",
+    "vitest": "^4.0.16",
     "vue": "^3.4.21",
     "vue-eslint-parser": "^9.4.2",
     "vue-router": "^4.3.2"

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

@@ -15,18 +15,25 @@
       :preview="collapsedPreview"
       :format="currentFormat"
       :available-formats="currentFormat === 'json' || currentFormat === 'yaml' ? ['json', 'yaml'] : currentFormat === 'text' || currentFormat === 'markdown' ? ['text', 'markdown'] : []"
+      :allow-any-language="allowAnyLanguage"
       @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">
+      <div
+        class="code-wrapper relative flex flex-col flex-1 min-h-0"
+        tabindex="0"
+        @keydown="editor.onKeyDown"
+      >
         <!-- Language badge - shows popout format options on hover -->
         <LanguageBadge
+          ref="languageBadgeRef"
           :format="currentFormat"
           :available-formats="currentFormat === 'json' || currentFormat === 'yaml' ? ['json', 'yaml'] : currentFormat === 'text' || currentFormat === 'markdown' ? ['text', 'markdown'] : []"
           :toggleable="true"
+          :allow-any-language="allowAnyLanguage"
           @click.stop
           @change="onFormatChange"
         />
@@ -110,6 +117,7 @@ export interface CodeViewerProps {
 	collapsible?: boolean;
 	defaultCollapsed?: boolean;
 	defaultCodeFormat?: "json" | "yaml";
+	allowAnyLanguage?: boolean;
 }
 
 const props = withDefaults(defineProps<CodeViewerProps>(), {
@@ -127,6 +135,8 @@ const emit = defineEmits<{
 	"update:modelValue": [value: object | string | null];
 	"update:format": [format: CodeFormat];
 	"update:editable": [editable: boolean];
+	"exit": [];
+	"delete": [];
 }>();
 
 // Initialize composable with current props
@@ -138,6 +148,7 @@ const codeFormat = useCodeFormat({
 // Local state
 const currentFormat = ref<CodeFormat>(props.format);
 const codeRef = ref<HTMLPreElement | null>(null);
+const languageBadgeRef = ref<InstanceType<typeof LanguageBadge> | null>(null);
 
 // Collapsed state (for collapsible mode)
 const isCollapsed = ref(props.collapsible && props.defaultCollapsed);
@@ -154,9 +165,26 @@ function toggleCollapse() {
 	isCollapsed.value = !isCollapsed.value;
 }
 
-// Sync composable format with current format
+// 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),
+	onEmitFormat: (format) => onFormatChange(format),
+	onExit: () => emit("exit"),
+	onDelete: () => emit("delete"),
+	onOpenLanguageSearch: () => languageBadgeRef.value?.openSearchPanel()
+});
+
+// Sync composable format with current format and update editor content
 watch(currentFormat, (newFormat) => {
 	codeFormat.setFormat(newFormat);
+	// Update editor content when format changes (needed for syntax re-highlighting)
+	editor.updateEditingContentOnFormatChange();
 });
 
 // Watch for external format changes
@@ -170,17 +198,6 @@ watch(() => 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);
@@ -198,7 +215,7 @@ const { collapsedPreview } = useCodeViewerCollapse({
 function onFormatChange(newFormat: CodeFormat) {
 	currentFormat.value = newFormat;
 	emit("update:format", newFormat);
-	editor.updateEditingContentOnFormatChange();
+	// Note: editor.updateEditingContentOnFormatChange() is called by the currentFormat watcher
 }
 
 // Get the raw markdown content for MarkdownContent component

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

@@ -11,6 +11,7 @@
         :format="format"
         :available-formats="availableFormats"
         :toggleable="availableFormats.length > 1"
+        :allow-any-language="allowAnyLanguage"
         @click.stop
         @change="(fmt) => $emit('format-change', fmt)"
       />
@@ -25,6 +26,7 @@ defineProps<{
 	preview: string;
 	format: string;
 	availableFormats?: string[];
+	allowAnyLanguage?: boolean;
 }>();
 
 defineEmits<{

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

@@ -26,13 +26,13 @@
       @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 { QBtn } from "quasar";
 import { computed } from "vue";
 import { ValidationError } from "../../../composables/useCodeFormat";
 

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

@@ -3,8 +3,21 @@
     class="dx-language-badge-container"
     :class="{ 'is-toggleable': toggleable && availableFormats.length > 1 }"
     @mouseenter="showOptions = true"
-    @mouseleave="showOptions = false"
+    @mouseleave="onMouseLeave"
   >
+    <!-- Search icon (when allowAnyLanguage is true) - placed first/leftmost -->
+    <transition name="slide-left">
+      <div
+        v-if="showOptions && allowAnyLanguage"
+        class="dx-language-option dx-language-search-trigger"
+        @click.stop="openSearchPanel"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
+        </svg>
+      </div>
+    </transition>
+
     <!-- Other format options (slide out to the left) -->
     <transition name="slide-left">
       <div
@@ -23,36 +36,197 @@
     </transition>
 
     <!-- Current format badge (stays in place) -->
-    <div class="dx-language-badge" :class="{ 'is-active': showOptions && otherFormats.length > 0 }">
+    <div class="dx-language-badge" :class="{ 'is-active': showOptions && (otherFormats.length > 0 || allowAnyLanguage) }">
       {{ format.toUpperCase() }}
     </div>
+
+    <!-- Search dropdown panel -->
+    <transition name="fade">
+      <div
+        v-if="showSearchPanel"
+        class="dx-language-search-panel"
+        @click.stop
+      >
+        <input
+          ref="searchInputRef"
+          v-model="searchQuery"
+          type="text"
+          class="dx-language-search-input"
+          placeholder="Search languages..."
+          @input="onSearchQueryChange"
+          @keydown.down.prevent="navigateDown"
+          @keydown.up.prevent="navigateUp"
+          @keydown.enter.prevent="selectCurrentItem"
+          @keydown.escape="closeSearchPanel"
+        />
+        <div class="dx-language-search-list">
+          <div
+            v-for="(lang, index) in filteredLanguages"
+            :key="lang"
+            class="dx-language-search-item"
+            :class="{ 'is-selected': index === selectedIndex }"
+            @click="selectLanguage(lang)"
+            @mouseenter="selectedIndex = index"
+          >
+            {{ lang.toUpperCase() }}
+          </div>
+          <div v-if="filteredLanguages.length === 0" class="dx-language-search-empty">
+            No languages found
+          </div>
+        </div>
+      </div>
+    </transition>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from "vue";
+
+// All supported languages (sorted alphabetically)
+const ALL_LANGUAGES = [
+  "bash",
+  "c",
+  "cpp",
+  "css",
+  "dockerfile",
+  "go",
+  "graphql",
+  "html",
+  "java",
+  "javascript",
+  "json",
+  "kotlin",
+  "markdown",
+  "php",
+  "python",
+  "ruby",
+  "rust",
+  "scss",
+  "sql",
+  "swift",
+  "text",
+  "typescript",
+  "xml",
+  "yaml"
+];
 
 export interface LanguageBadgeProps {
   format: string;
   availableFormats?: string[];
   toggleable?: boolean;
+  allowAnyLanguage?: boolean;
 }
 
 const props = withDefaults(defineProps<LanguageBadgeProps>(), {
   availableFormats: () => [],
-  toggleable: true
+  toggleable: true,
+  allowAnyLanguage: false
 });
 
-defineEmits<{
+const emit = defineEmits<{
   change: [format: string];
 }>();
 
 const showOptions = ref(false);
+const showSearchPanel = ref(false);
+const searchQuery = ref("");
+const searchInputRef = ref<HTMLInputElement | null>(null);
+const selectedIndex = ref(0);
 
 // Get formats other than the current one
 const otherFormats = computed(() => {
   return props.availableFormats.filter(f => f !== props.format);
 });
+
+// Filter languages based on search query
+const filteredLanguages = computed(() => {
+  if (!searchQuery.value) {
+    return ALL_LANGUAGES;
+  }
+  const query = searchQuery.value.toLowerCase();
+  return ALL_LANGUAGES.filter(lang => lang.toLowerCase().includes(query));
+});
+
+// Reset selectedIndex when search query changes
+function onSearchQueryChange() {
+  selectedIndex.value = 0;
+}
+
+// Keyboard navigation functions
+function navigateDown() {
+  if (filteredLanguages.value.length === 0) return;
+  selectedIndex.value = (selectedIndex.value + 1) % filteredLanguages.value.length;
+  scrollSelectedIntoView();
+}
+
+function navigateUp() {
+  if (filteredLanguages.value.length === 0) return;
+  selectedIndex.value = selectedIndex.value === 0
+    ? filteredLanguages.value.length - 1
+    : selectedIndex.value - 1;
+  scrollSelectedIntoView();
+}
+
+function selectCurrentItem() {
+  if (filteredLanguages.value.length > 0) {
+    selectLanguage(filteredLanguages.value[selectedIndex.value]);
+  }
+}
+
+function scrollSelectedIntoView() {
+  nextTick(() => {
+    const list = document.querySelector(".dx-language-search-list");
+    const selected = list?.querySelector(".is-selected");
+    selected?.scrollIntoView({ block: "nearest" });
+  });
+}
+
+function openSearchPanel() {
+  showSearchPanel.value = true;
+  searchQuery.value = "";
+  selectedIndex.value = 0;
+  nextTick(() => {
+    searchInputRef.value?.focus();
+  });
+}
+
+function closeSearchPanel() {
+  showSearchPanel.value = false;
+  searchQuery.value = "";
+}
+
+function selectLanguage(lang: string) {
+  emit("change", lang);
+  closeSearchPanel();
+}
+
+function onMouseLeave() {
+  showOptions.value = false;
+  // Don't close search panel on mouse leave - let click outside handle it
+}
+
+function handleClickOutside(event: MouseEvent) {
+  if (showSearchPanel.value) {
+    const target = event.target as HTMLElement;
+    const panel = document.querySelector(".dx-language-search-panel");
+    if (panel && !panel.contains(target)) {
+      closeSearchPanel();
+    }
+  }
+}
+
+onMounted(() => {
+  document.addEventListener("mousedown", handleClickOutside);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("mousedown", handleClickOutside);
+});
+
+// Expose openSearchPanel for external callers (e.g., keyboard shortcut from CodeViewer)
+defineExpose({
+  openSearchPanel
+});
 </script>
 
 <style lang="scss">
@@ -94,6 +268,19 @@ const otherFormats = computed(() => {
   }
 }
 
+// Search trigger inherits from .dx-language-option, only adds flex centering for the icon
+.dx-language-search-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 6px;
+
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+}
+
 .dx-language-badge {
   padding: 2px 8px;
   font-size: 0.7em;
@@ -108,6 +295,81 @@ const otherFormats = computed(() => {
   }
 }
 
+.dx-language-search-panel {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  background: rgba(0, 0, 0, 0.9);
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  min-width: 160px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.dx-language-search-input {
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 0.8em;
+  background: rgba(255, 255, 255, 0.05);
+  border: none;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.9);
+  outline: none;
+
+  &::placeholder {
+    color: rgba(255, 255, 255, 0.4);
+  }
+
+  &:focus {
+    background: rgba(255, 255, 255, 0.08);
+  }
+}
+
+.dx-language-search-list {
+  max-height: 200px;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.2);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.3);
+    }
+  }
+}
+
+.dx-language-search-item {
+  padding: 6px 12px;
+  font-size: 0.75em;
+  color: rgba(255, 255, 255, 0.7);
+  cursor: pointer;
+  transition: all 0.15s;
+
+  &:hover,
+  &.is-selected {
+    background: rgba(255, 255, 255, 0.15);
+    color: rgba(255, 255, 255, 0.95);
+  }
+}
+
+.dx-language-search-empty {
+  padding: 12px;
+  font-size: 0.75em;
+  color: rgba(255, 255, 255, 0.4);
+  text-align: center;
+}
+
 // Slide animation for options
 .slide-left-enter-active,
 .slide-left-leave-active {
@@ -119,4 +381,15 @@ const otherFormats = computed(() => {
   opacity: 0;
   transform: translateX(10px);
 }
+
+// Fade animation for search panel
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>

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

@@ -3,3 +3,6 @@ export { default as CodeViewerCollapsed } from "./CodeViewerCollapsed.vue";
 export { default as CodeViewerFooter } from "./CodeViewerFooter.vue";
 export { default as LanguageBadge } from "./LanguageBadge.vue";
 export { default as MarkdownContent } from "./MarkdownContent.vue";
+
+// Re-export Markdown editor components
+export * from "../Markdown";