v-nuxt-ui 0.1.0

package/dist/runtime/components/SqlEditor.vue

@@ -0,0 +1,255 @@
+<script setup>
+import { onMounted, watch, onUnmounted } from "vue";
+import { useColorMode } from "#imports";
+import { format } from "sql-formatter";
+const value = defineModel("modelValue", { type: null, ...{ required: true } });
+const props = defineProps({
+  tables: { type: Array, required: false, default: () => [] },
+  columns: { type: Object, required: false, default: () => ({}) }
+});
+const colorMode = useColorMode();
+let editor = null;
+let monaco = null;
+let completionProvider = null;
+const getTheme = () => {
+  return colorMode.value === "dark" ? "vs-dark" : "vs";
+};
+const formatSQL = () => {
+  if (editor) {
+    const currentValue = editor.getValue();
+    const formatted = format(currentValue, { language: "postgresql" });
+    editor.setValue(formatted);
+  }
+};
+const getValue = () => {
+  return editor?.getValue() || "";
+};
+const setValue = (newValue) => {
+  if (editor) {
+    editor.setValue(newValue);
+  }
+};
+onMounted(async () => {
+  monaco = await import("monaco-editor");
+  completionProvider = monaco.languages.registerCompletionItemProvider("sql", {
+    triggerCharacters: [" ", ",", ".", "(", "\n"],
+    provideCompletionItems: (model, position) => {
+      const suggestions = [];
+      const wordInfo = model.getWordUntilPosition(position);
+      const range = {
+        startLineNumber: position.lineNumber,
+        endLineNumber: position.lineNumber,
+        startColumn: wordInfo.startColumn,
+        endColumn: wordInfo.endColumn
+      };
+      const textBeforeCursor = model.getValueInRange({
+        startLineNumber: 1,
+        startColumn: 1,
+        endLineNumber: position.lineNumber,
+        endColumn: position.column
+      });
+      const textBeforeCursorUpper = textBeforeCursor.toUpperCase();
+      const currentLine = model.getLineContent(position.lineNumber).toUpperCase();
+      const isAfterFrom = /\bFROM\s+\w*$/i.test(textBeforeCursorUpper) || /\bJOIN\s+\w*$/i.test(textBeforeCursorUpper);
+      const isAfterSelect = /\bSELECT\s+(?:\w+\s*,\s*)*\w*$/i.test(textBeforeCursorUpper) || /,\s*\w*$/i.test(currentLine);
+      const isAfterWhere = /\bWHERE\s+(?:.*?\s+)?(?:AND|OR)?\s*\w*$/i.test(textBeforeCursorUpper);
+      const declaredTables = [];
+      const fromMatches = textBeforeCursor.matchAll(/\b(?:FROM|JOIN)\s+(\w+)/gi);
+      for (const match of fromMatches) {
+        const tableName = match[1];
+        const foundTable = props.tables.find((t) => t.toLowerCase() === tableName.toLowerCase());
+        if (foundTable) {
+          declaredTables.push(foundTable);
+        }
+      }
+      const commonKeywords = [
+        "SELECT",
+        "FROM",
+        "WHERE",
+        "JOIN",
+        "INNER JOIN",
+        "LEFT JOIN",
+        "RIGHT JOIN",
+        "AND",
+        "OR",
+        "ORDER BY",
+        "GROUP BY",
+        "LIMIT",
+        "AS",
+        "ON"
+      ];
+      const otherKeywords = [
+        "FULL JOIN",
+        "NOT",
+        "IN",
+        "LIKE",
+        "BETWEEN",
+        "IS",
+        "NULL",
+        "HAVING",
+        "ASC",
+        "DESC",
+        "OFFSET",
+        "DISTINCT",
+        "INSERT INTO",
+        "VALUES",
+        "UPDATE",
+        "SET",
+        "DELETE FROM",
+        "CREATE TABLE",
+        "DROP TABLE",
+        "ALTER TABLE",
+        "COUNT",
+        "SUM",
+        "AVG",
+        "MAX",
+        "MIN",
+        "UNION",
+        "UNION ALL",
+        "EXISTS",
+        "CASE",
+        "WHEN",
+        "THEN",
+        "ELSE",
+        "END"
+      ];
+      if (isAfterFrom) {
+        props.tables.forEach((table) => {
+          suggestions.push({
+            label: table,
+            kind: monaco.languages.CompletionItemKind.Class,
+            insertText: table,
+            detail: "\u8868\u540D",
+            sortText: "0_" + table,
+            // 使用 0_ 前缀确保排在最前
+            range
+          });
+        });
+      } else if (isAfterSelect || isAfterWhere) {
+        if (declaredTables.length > 0) {
+          declaredTables.forEach((tableName) => {
+            const fields = props.columns[tableName] || [];
+            fields.forEach((field) => {
+              suggestions.push({
+                label: field,
+                kind: monaco.languages.CompletionItemKind.Field,
+                insertText: field,
+                detail: `${tableName} \u5B57\u6BB5`,
+                sortText: "0_" + field,
+                range
+              });
+            });
+          });
+        } else {
+          Object.entries(props.columns).forEach(([tableName, fields]) => {
+            fields.forEach((field) => {
+              suggestions.push({
+                label: field,
+                kind: monaco.languages.CompletionItemKind.Field,
+                insertText: field,
+                detail: `${tableName} \u5B57\u6BB5`,
+                sortText: "0_" + field,
+                range
+              });
+            });
+          });
+        }
+      } else {
+        commonKeywords.forEach((keyword) => {
+          suggestions.push({
+            label: keyword,
+            kind: monaco.languages.CompletionItemKind.Keyword,
+            insertText: keyword,
+            detail: "SQL \u5173\u952E\u5B57",
+            sortText: "1_" + keyword,
+            range
+          });
+        });
+        otherKeywords.forEach((keyword) => {
+          suggestions.push({
+            label: keyword,
+            kind: monaco.languages.CompletionItemKind.Keyword,
+            insertText: keyword,
+            detail: "SQL \u5173\u952E\u5B57",
+            sortText: "2_" + keyword,
+            range
+          });
+        });
+        props.tables.forEach((table) => {
+          suggestions.push({
+            label: table,
+            kind: monaco.languages.CompletionItemKind.Class,
+            insertText: table,
+            detail: "\u8868\u540D",
+            sortText: "3_" + table,
+            range
+          });
+        });
+        Object.entries(props.columns).forEach(([tableName, fields]) => {
+          fields.forEach((field) => {
+            suggestions.push({
+              label: field,
+              kind: monaco.languages.CompletionItemKind.Field,
+              insertText: field,
+              detail: `${tableName} \u5B57\u6BB5`,
+              sortText: "4_" + field,
+              range
+            });
+          });
+        });
+      }
+      return { suggestions };
+    }
+  });
+  const container = document.getElementById("editor");
+  if (container) {
+    editor = monaco.editor.create(container, {
+      value: value.value,
+      language: "sql",
+      theme: getTheme(),
+      automaticLayout: true,
+      fontSize: 14,
+      minimap: { enabled: false },
+      scrollBeyondLastLine: false,
+      wordWrap: "on",
+      tabSize: 2,
+      lineNumbers: "on",
+      glyphMargin: false,
+      folding: false,
+      lineNumbersMinChars: 3,
+      overviewRulerBorder: false,
+      hideCursorInOverviewRuler: true,
+      scrollbar: {
+        horizontal: "auto",
+        vertical: "auto"
+      },
+      autoClosingBrackets: "always",
+      autoClosingOvertype: "always",
+      autoClosingQuotes: "always"
+    });
+    editor.onDidChangeModelContent(() => {
+      if (editor) {
+        value.value = editor.getValue();
+      }
+    });
+  }
+});
+watch(() => colorMode.value, () => {
+  if (editor) {
+    monaco.editor.setTheme(getTheme());
+  }
+});
+onUnmounted(() => {
+  editor?.dispose();
+  completionProvider?.dispose();
+});
+defineExpose({
+  formatSQL,
+  getValue,
+  setValue
+});
+</script>
+
+<template>
+  <div id="editor" class="h-100" />
+</template>

package/dist/runtime/components/SqlEditor.vue.d.ts

@@ -0,0 +1,23 @@
+interface Props {
+    tables?: string[];
+    columns?: Record<string, string[]>;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    'modelValue': string | null | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    formatSQL: () => void;
+    getValue: () => any;
+    setValue: (newValue: string) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
+}>, {
+    tables: string[];
+    columns: Record<string, string[]>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Watermark.d.vue.ts

@@ -0,0 +1,44 @@
+interface Props {
+    text?: string | string[];
+    fontSize?: number;
+    fontWeight?: string | number;
+    fontFamily?: string;
+    fontColor?: string;
+    lineHeight?: number;
+    rotate?: number;
+    gap?: number;
+    opacity?: number;
+    disabled?: boolean;
+    debug?: boolean;
+    textAlign?: 'left' | 'center' | 'right';
+    xOffset?: number;
+    yOffset?: number;
+    zIndex?: number;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    disabled: boolean;
+    text: string | string[];
+    fontSize: number;
+    fontWeight: string | number;
+    fontColor: string;
+    lineHeight: number;
+    rotate: number;
+    gap: number;
+    opacity: number;
+    debug: boolean;
+    textAlign: "left" | "center" | "right";
+    xOffset: number;
+    yOffset: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Watermark.vue

@@ -0,0 +1,162 @@
+<script setup>
+import { useColorMode } from "@vueuse/core";
+import { ref, onMounted, watch } from "vue";
+const props = defineProps({
+  text: { type: [String, Array], required: false, default: "Watermark" },
+  fontSize: { type: Number, required: false, default: 13 },
+  fontWeight: { type: [String, Number], required: false, default: 300 },
+  fontFamily: { type: String, required: false },
+  fontColor: { type: String, required: false, default: "text-neutral-200 dark:text-neutral-700" },
+  lineHeight: { type: Number, required: false, default: 16 },
+  rotate: { type: Number, required: false, default: -16 },
+  gap: { type: Number, required: false, default: 128 },
+  opacity: { type: Number, required: false, default: 0.6 },
+  disabled: { type: Boolean, required: false, default: false },
+  debug: { type: Boolean, required: false, default: false },
+  textAlign: { type: String, required: false, default: "center" },
+  xOffset: { type: Number, required: false, default: 0 },
+  yOffset: { type: Number, required: false, default: 0 },
+  zIndex: { type: Number, required: false }
+});
+const watermarkStyle = ref("");
+const canvas = import.meta.client ? document.createElement("canvas") : null;
+const ctx = canvas ? canvas.getContext("2d") : null;
+function getRatio(context) {
+  if (!context) return 1;
+  const backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || 1;
+  return (window.devicePixelRatio || 1) / backingStore;
+}
+const getTailwindColor = (className) => {
+  if (!import.meta.client) return props.fontColor;
+  const tempElement = document.createElement("div");
+  tempElement.className = className;
+  tempElement.style.position = "absolute";
+  tempElement.style.visibility = "hidden";
+  document.body.appendChild(tempElement);
+  const computedColor = getComputedStyle(tempElement).color;
+  document.body.removeChild(tempElement);
+  return computedColor;
+};
+const fontsReady = ref(false);
+onMounted(async () => {
+  if (import.meta.client && "fonts" in document) {
+    try {
+      await document.fonts.ready;
+      fontsReady.value = true;
+    } catch {
+      fontsReady.value = true;
+    }
+  } else {
+    fontsReady.value = true;
+  }
+});
+const generateWatermark = () => {
+  if (props.disabled || !props.text || !canvas || !ctx || !fontsReady.value) {
+    watermarkStyle.value = "";
+    return;
+  }
+  const ratio = getRatio(ctx);
+  let color = props.fontColor;
+  if (color.startsWith("text-") || color.includes("dark:")) {
+    color = getTailwindColor(color);
+  }
+  const fontSize = props.fontSize * ratio;
+  const lineHeight = props.lineHeight * ratio;
+  ctx.font = `${props.fontWeight} ${fontSize}px ${props.fontFamily}`;
+  const texts = Array.isArray(props.text) ? props.text : [props.text];
+  let maxWidth = 0;
+  const textLines = texts.map((line) => {
+    const width = ctx.measureText(line).width;
+    maxWidth = Math.max(maxWidth, width);
+    return { line, width };
+  });
+  const textHeight = texts.length * lineHeight;
+  const rad = props.rotate * Math.PI / 180;
+  const cos = Math.abs(Math.cos(rad));
+  const sin = Math.abs(Math.sin(rad));
+  const rotatedWidth = maxWidth * cos + textHeight * sin;
+  const rotatedHeight = maxWidth * sin + textHeight * cos;
+  const canvasWidth = Math.ceil(rotatedWidth + props.gap * ratio);
+  const canvasHeight = Math.ceil(rotatedHeight + props.gap * ratio);
+  canvas.width = canvasWidth;
+  canvas.height = canvasHeight;
+  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+  ctx.imageSmoothingEnabled = true;
+  ctx.font = `${props.fontWeight} ${fontSize}px ${props.fontFamily}`;
+  ctx.fillStyle = color;
+  ctx.textBaseline = "top";
+  ctx.translate(canvasWidth / 2, canvasHeight / 2);
+  ctx.rotate(rad);
+  if (props.debug) {
+    ctx.strokeStyle = "red";
+    ctx.strokeRect(-maxWidth / 2, -textHeight / 2, maxWidth, textHeight);
+  }
+  textLines.forEach(({ line, width }, index) => {
+    let alignOffset = 0;
+    switch (props.textAlign) {
+      case "left":
+        alignOffset = -maxWidth / 2;
+        break;
+      case "center":
+        alignOffset = -width / 2;
+        break;
+      case "right":
+        alignOffset = maxWidth / 2 - width;
+        break;
+    }
+    const x = alignOffset + props.xOffset * ratio;
+    const y = -textHeight / 2 + index * lineHeight + props.yOffset * ratio;
+    ctx.fillText(line, x, y);
+  });
+  const dataURL = canvas.toDataURL("image/png");
+  const styleWidth = canvasWidth / ratio;
+  const styleHeight = canvasHeight / ratio;
+  watermarkStyle.value = `
+    background-image: url(${dataURL});
+    background-repeat: repeat;
+    background-size: ${styleWidth}px ${styleHeight}px;
+  `;
+};
+watch(
+  () => [
+    props.text,
+    props.fontSize,
+    props.fontWeight,
+    props.fontFamily,
+    props.fontColor,
+    props.lineHeight,
+    props.rotate,
+    props.gap,
+    props.disabled,
+    props.textAlign,
+    props.xOffset,
+    props.yOffset,
+    fontsReady.value
+  ],
+  generateWatermark,
+  { immediate: true, deep: true }
+);
+const colorMode = useColorMode();
+watch(() => colorMode.value, generateWatermark);
+onMounted(() => {
+  generateWatermark();
+});
+</script>
+
+<template>
+  <div class="relative flex overflow-hidden size-full">
+    <!-- 水印层 -->
+    <div
+      v-if="!disabled && watermarkStyle"
+      class="absolute inset-0 pointer-events-none select-none"
+      :style="`
+        ${watermarkStyle}
+        opacity: ${opacity};
+        z-index: ${zIndex ?? 0};
+      `"
+    />
+
+    <!-- 内容 -->
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/Watermark.vue.d.ts

@@ -0,0 +1,44 @@
+interface Props {
+    text?: string | string[];
+    fontSize?: number;
+    fontWeight?: string | number;
+    fontFamily?: string;
+    fontColor?: string;
+    lineHeight?: number;
+    rotate?: number;
+    gap?: number;
+    opacity?: number;
+    disabled?: boolean;
+    debug?: boolean;
+    textAlign?: 'left' | 'center' | 'right';
+    xOffset?: number;
+    yOffset?: number;
+    zIndex?: number;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    disabled: boolean;
+    text: string | string[];
+    fontSize: number;
+    fontWeight: string | number;
+    fontColor: string;
+    lineHeight: number;
+    rotate: number;
+    gap: number;
+    opacity: number;
+    debug: boolean;
+    textAlign: "left" | "center" | "right";
+    xOffset: number;
+    yOffset: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/badge/CodeModal.client.d.vue.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    data: string | Record<string, any> | undefined | null;
+    lang?: 'json' | 'sql' | 'text';
+    title?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    lang: "json" | "sql" | "text";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/badge/CodeModal.client.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { ref, computed, watch } from "vue";
+import { useClipboard, useColorMode } from "@vueuse/core";
+import { codeToHtml } from "shiki";
+const props = defineProps({
+  data: { type: null, required: true },
+  lang: { type: String, required: false, default: "text" },
+  title: { type: String, required: false, default: "\u67E5\u770B" }
+});
+const open = ref(false);
+const colorMode = useColorMode();
+const { copy, copied } = useClipboard();
+const codeText = computed(() => {
+  if (props.data == null) return "";
+  if (typeof props.data === "string") return props.data;
+  return JSON.stringify(props.data, null, 2);
+});
+const highlightedHtml = ref("");
+const updateHighlight = async () => {
+  const text = codeText.value;
+  if (!text) {
+    highlightedHtml.value = "";
+    return;
+  }
+  if (props.lang === "text") {
+    highlightedHtml.value = "";
+    return;
+  }
+  try {
+    highlightedHtml.value = await codeToHtml(text, {
+      lang: props.lang,
+      theme: colorMode.value === "dark" ? "github-dark" : "github-light"
+    });
+  } catch {
+    highlightedHtml.value = "";
+  }
+};
+watch([codeText, () => colorMode.value], updateHighlight, { immediate: true });
+</script>
+
+<template>
+  <UModal v-model:open="open" :title="title">
+    <UBadge
+      icon="i-lucide-expand"
+      color="neutral"
+      variant="subtle"
+      label="查看"
+      class="cursor-pointer"
+      @click="open = true"
+    />
+    <template #body>
+      <div class="overflow-hidden text-sm">
+        <template v-if="highlightedHtml">
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <div class="overflow-auto" v-html="highlightedHtml" />
+        </template>
+        <pre v-else class="whitespace-pre-wrap">{{ codeText }}</pre>
+      </div>
+    </template>
+    <template #footer="{ close }">
+      <UButton
+        icon="i-lucide-x"
+        label="关闭"
+        color="neutral"
+        variant="outline"
+        @click="close"
+      />
+      <UButton
+        :icon="copied ? 'i-lucide-copy-check' : 'i-lucide-copy'"
+        label="复制"
+        color="neutral"
+        variant="outline"
+        @click="copy(codeText)"
+      />
+    </template>
+  </UModal>
+</template>

package/dist/runtime/components/badge/CodeModal.client.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    data: string | Record<string, any> | undefined | null;
+    lang?: 'json' | 'sql' | 'text';
+    title?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    lang: "json" | "sql" | "text";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/badge/CodeTooltip.client.d.vue.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    data: string | Record<string, any> | undefined | null;
+    lang?: 'json' | 'sql' | 'text';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    lang: "json" | "sql" | "text";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;