@routa/ui-vue 0.1.0

package/dist/watermark/index.mjs

@@ -0,0 +1,183 @@
+import '../style/watermark.css';
+import { defineComponent as C, ref as k, computed as S, onMounted as F, onUnmounted as L, watch as B, openBlock as H, createElementBlock as O, normalizeClass as T, renderSlot as U, createElementVNode as X, normalizeStyle as Y, nextTick as D } from "vue";
+const j = {
+  /**
+   * 水印宽度
+   * Watermark width
+   */
+  width: {
+    type: Number
+  },
+  /**
+   * 水印高度
+   * Watermark height
+   */
+  height: {
+    type: Number
+  },
+  /**
+   * 水印旋转角度
+   * Rotation angle
+   */
+  rotate: {
+    type: Number,
+    default: -22
+  },
+  /**
+   * 水印层级
+   * z-index of the watermark
+   */
+  zIndex: {
+    type: Number,
+    default: 2e3
+  },
+  /**
+   * 图片水印源
+   * Image source for watermark
+   */
+  image: {
+    type: String
+  },
+  /**
+   * 文字水印内容
+   * Text content for watermark
+   */
+  content: {
+    type: [String, Array]
+  },
+  /**
+   * 文字水印字体配置
+   * Font configuration for text watermark
+   */
+  font: {
+    type: Object
+  },
+  /**
+   * 水印之间的间距 [x, y]
+   * Gap between watermarks [x, y]
+   */
+  gap: {
+    type: Array,
+    default: () => [100, 100]
+  },
+  /**
+   * 水印相对于容器的偏移 [x, y]
+   * Offset from the container [x, y]
+   */
+  offset: {
+    type: Array
+  },
+  /**
+   * 是否覆盖整个页面
+   * Whether to cover the full page
+   */
+  fullPage: {
+    type: Boolean,
+    default: !1
+  }
+}, V = /* @__PURE__ */ C({
+  name: "Watermark",
+  __name: "Watermark",
+  props: j,
+  setup(y) {
+    const t = y, v = k(null), h = k(null), p = k(""), f = S(() => t.content ? (Array.isArray(t.content) ? t.content : [t.content]).filter((n) => typeof n == "string") : []), g = S(() => {
+      var n, e, o, l, r;
+      return {
+        color: ((n = t.font) == null ? void 0 : n.color) || "rgba(0, 0, 0, 0.15)",
+        fontSize: ((e = t.font) == null ? void 0 : e.fontSize) || 16,
+        fontWeight: ((o = t.font) == null ? void 0 : o.fontWeight) || "normal",
+        fontFamily: ((l = t.font) == null ? void 0 : l.fontFamily) || "sans-serif",
+        fontStyle: ((r = t.font) == null ? void 0 : r.fontStyle) || "normal"
+      };
+    }), w = () => {
+      const n = document.createElement("canvas"), e = n.getContext("2d");
+      if (!e) return;
+      const o = window.devicePixelRatio || 1, [l, r] = t.gap, u = t.rotate * Math.PI / 180;
+      if (t.image) {
+        const a = new Image();
+        a.crossOrigin = "anonymous", a.referrerPolicy = "no-referrer", a.src = t.image, a.onload = () => {
+          const { width: i = 120, height: s = 64 } = t, m = (i + l) * o, d = (s + r) * o;
+          n.width = m, n.height = d, e.scale(o, o), e.translate((i + l) / 2, (s + r) / 2), e.rotate(u), e.drawImage(a, -i / 2, -s / 2, i, s), p.value = n.toDataURL();
+        };
+      } else if (f.value.length) {
+        const { fontSize: a, color: i, fontWeight: s, fontFamily: m, fontStyle: d } = g.value;
+        e.font = `${d} ${s} ${typeof a == "number" ? `${a}px` : a} ${m}`;
+        const x = f.value.map((b) => e.measureText(b).width), A = Math.max(...x), z = typeof a == "number" ? a + 4 : parseInt(String(a)) + 4, I = t.width || A, $ = t.height || z * f.value.length, _ = (I + l) * o, E = ($ + r) * o;
+        n.width = _, n.height = E, e.scale(o, o), e.fillStyle = i, e.font = `${d} ${s} ${typeof a == "number" ? `${a}px` : a} ${m}`, e.textBaseline = "top", e.textAlign = "center", e.translate((I + l) / 2, ($ + r) / 2), e.rotate(u), f.value.forEach((b, M) => {
+          const N = -$ / 2 + M * z;
+          e.fillText(b, 0, N);
+        }), p.value = n.toDataURL();
+      }
+    }, R = S(() => {
+      const [n = 0, e = 0] = t.offset || [], [o, l] = t.gap, { fontSize: r } = g.value, a = document.createElement("canvas").getContext("2d");
+      let i = t.width || 120;
+      if (a && f.value.length && !t.width) {
+        a.font = `${g.value.fontStyle} ${g.value.fontWeight} ${typeof r == "number" ? `${r}px` : r} ${g.value.fontFamily}`;
+        const d = f.value.map((x) => a.measureText(x).width);
+        i = Math.max(...d);
+      }
+      const s = typeof r == "number" ? r + 4 : parseInt(String(r)) + 4, m = t.height || s * (f.value.length || 1);
+      return {
+        position: t.fullPage ? "fixed" : "absolute",
+        left: `${n}px`,
+        top: `${e}px`,
+        width: t.fullPage ? "100%" : `calc(100% - ${n}px)`,
+        height: t.fullPage ? "100%" : `calc(100% - ${e}px)`,
+        pointerEvents: "none",
+        backgroundRepeat: "repeat",
+        zIndex: t.zIndex,
+        backgroundImage: `url("${p.value}")`,
+        backgroundSize: `${i + o}px ${m + l}px`
+      };
+    });
+    let c = null;
+    const W = () => {
+      v.value && (c = new MutationObserver((n) => {
+        var e;
+        for (const o of n) {
+          const l = Array.from(o.removedNodes).includes(h.value), r = o.target === h.value && o.type === "attributes";
+          if (l || r) {
+            const u = (e = h.value) == null ? void 0 : e.getAttribute("style");
+            if (r && u && u.includes(p.value))
+              continue;
+            c == null || c.disconnect(), w(), D(() => W());
+            break;
+          }
+        }
+      }), c.observe(v.value, {
+        attributes: !0,
+        childList: !0,
+        subtree: !0,
+        attributeFilter: ["style", "class"]
+      }));
+    };
+    return F(() => {
+      w(), W();
+    }), L(() => {
+      c == null || c.disconnect();
+    }), B(() => [t.content, t.image, t.rotate, t.gap, t.width, t.height, t.font], () => {
+      w();
+    }, { deep: !0 }), (n, e) => (H(), O("div", {
+      ref_key: "containerRef",
+      ref: v,
+      class: T(["l-watermark", { "l-watermark--full": n.fullPage }])
+    }, [
+      U(n.$slots, "default"),
+      X("div", {
+        ref_key: "watermarkRef",
+        ref: h,
+        class: "l-watermark__inner",
+        style: Y(R.value),
+        "aria-hidden": "true"
+      }, null, 4)
+    ], 2));
+  }
+}), P = V;
+P.install = (y) => {
+  y.component("LWatermark", P);
+};
+export {
+  P as LWatermark,
+  P as default,
+  j as watermarkProps
+};

package/dist/watermark/types.d.ts

@@ -0,0 +1,85 @@
+import { ExtractPropTypes, PropType } from 'vue';
+export interface WatermarkFont {
+    color?: string;
+    fontSize?: number | string;
+    fontWeight?: 'normal' | 'light' | 'weight' | number;
+    fontFamily?: string;
+    fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
+}
+export declare const watermarkProps: {
+    /**
+     * 水印宽度
+     * Watermark width
+     */
+    readonly width: {
+        readonly type: NumberConstructor;
+    };
+    /**
+     * 水印高度
+     * Watermark height
+     */
+    readonly height: {
+        readonly type: NumberConstructor;
+    };
+    /**
+     * 水印旋转角度
+     * Rotation angle
+     */
+    readonly rotate: {
+        readonly type: NumberConstructor;
+        readonly default: -22;
+    };
+    /**
+     * 水印层级
+     * z-index of the watermark
+     */
+    readonly zIndex: {
+        readonly type: NumberConstructor;
+        readonly default: 2000;
+    };
+    /**
+     * 图片水印源
+     * Image source for watermark
+     */
+    readonly image: {
+        readonly type: StringConstructor;
+    };
+    /**
+     * 文字水印内容
+     * Text content for watermark
+     */
+    readonly content: {
+        readonly type: PropType<string | string[]>;
+    };
+    /**
+     * 文字水印字体配置
+     * Font configuration for text watermark
+     */
+    readonly font: {
+        readonly type: PropType<WatermarkFont>;
+    };
+    /**
+     * 水印之间的间距 [x, y]
+     * Gap between watermarks [x, y]
+     */
+    readonly gap: {
+        readonly type: PropType<[number, number]>;
+        readonly default: () => number[];
+    };
+    /**
+     * 水印相对于容器的偏移 [x, y]
+     * Offset from the container [x, y]
+     */
+    readonly offset: {
+        readonly type: PropType<[number, number]>;
+    };
+    /**
+     * 是否覆盖整个页面
+     * Whether to cover the full page
+     */
+    readonly fullPage: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+};
+export type WatermarkProps = ExtractPropTypes<typeof watermarkProps>;

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@routa/ui-vue",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "http://git.sunbtech.com/wangzg/routa.git"
+  },
+  "bugs": {
+    "url": "http://git.sunbtech.com/wangzg/routa/-/issues"
+  },
+  "homepage": "http://git.sunbtech.com/wangzg/routa",
+  "files": [
+    "dist",
+    "src/**/*.css",
+    "base.css",
+    "style.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./base.css": "./base.css",
+    "./style.css": "./style.css",
+    "./*/style.css": "./src/*/style/index.css",
+    "./dist/style.css": "./style.css",
+    "./dist/ui-vue.css": "./style.css"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "lint": "eslint src/**",
+    "type-check": "vue-tsc --noEmit",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:bench": "vitest bench"
+  },
+  "dependencies": {
+    "@floating-ui/vue": "^1.1.11",
+    "@iconify/vue": "^5.0.0",
+    "@tiptap/pm": "^3.22.5",
+    "@tiptap/starter-kit": "^3.22.5",
+    "@tiptap/vue-3": "^3.22.5"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@routa/adapter-vue": "workspace:*",
+    "@routa/headless": "workspace:*",
+    "@routa/theme": "workspace:*",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "typescript": "~6.0.3",
+    "vite": "^6.0.7",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^3.0.7",
+    "vue-tsc": "^2.1.0"
+  }
+}

package/src/autocomplete/style/index.css

@@ -0,0 +1,80 @@
+.l-autocomplete {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.l-autocomplete__popper {
+  background: var(--l-bg-surface);
+  border: var(--l-border-standard);
+  border-radius: var(--l-radius-overlay);
+  box-shadow: var(--l-shadow-overlay);
+  overflow: hidden;
+  min-width: 200px;
+}
+
+.l-autocomplete__suggestions {
+  list-style: none;
+  padding: 4px 0;
+  margin: 0;
+  max-height: 250px;
+  overflow-y: auto;
+}
+
+.l-autocomplete__item {
+  padding: 8px 16px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--l-text-main);
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.l-autocomplete__item:hover,
+.l-autocomplete__item.is-active {
+  background-color: var(--l-bg-selected);
+  color: var(--l-text-selected);
+}
+
+.l-autocomplete__loading {
+  padding: 20px;
+  text-align: center;
+  color: var(--l-text-muted);
+}
+
+.l-autocomplete__loading-icon {
+  animation: l-rotate 1s linear infinite;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+@keyframes l-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* --- Sizes --- */
+.l-autocomplete--sm .l-autocomplete__item {
+  padding: 6px 12px;
+  font-size: 12px;
+}
+
+.l-autocomplete--lg .l-autocomplete__item {
+  padding: 12px 20px;
+  font-size: 16px;
+}
+
+/* Empty state */
+.l-autocomplete__empty {
+  padding: 10px 16px;
+  text-align: center;
+  color: var(--l-text-muted);
+  font-size: 14px;
+}

package/src/avatar/style/index.css

@@ -0,0 +1,105 @@
+.l-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background-color: var(--l-bg-subtle);
+  color: var(--l-text-muted);
+  user-select: none;
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+
+/* Shapes */
+.l-avatar--circle {
+  border-radius: 50%;
+}
+
+.l-avatar--square {
+  border-radius: var(--l-radius-soft);
+}
+
+
+/* Aliases for alignment */
+.l-avatar--sm {
+  width: 24px;
+  height: 24px;
+  font-size: 12px;
+}
+
+.l-avatar--md {
+  width: 40px;
+  height: 40px;
+  font-size: 18px;
+}
+
+.l-avatar--lg {
+  width: 64px;
+  height: 64px;
+  font-size: 28px;
+}
+
+/* Layers */
+.l-avatar__img,
+.l-avatar__canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.l-avatar__text {
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.l-avatar__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2em;
+}
+
+.l-avatar__loading {
+  position: absolute;
+  inset: 0;
+  background-color: var(--l-bg-subtle);
+}
+
+.l-avatar__shimmer {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, 
+    rgba(255, 255, 255, 0) 0%, 
+    rgba(255, 255, 255, 0.2) 20%, 
+    rgba(255, 255, 255, 0.4) 60%, 
+    rgba(255, 255, 255, 0) 100%
+  );
+  background-size: 200% 100%;
+  animation: l-avatar-shimmer 1.5s infinite;
+}
+
+@keyframes l-avatar-shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+/* Avatar Group */
+.l-avatar-group {
+  display: inline-flex;
+  align-items: center;
+}
+
+.l-avatar-group__item {
+  position: relative;
+  transition: transform 0.3s ease;
+}
+
+.l-avatar-group__item:hover {
+  transform: translateY(-4px);
+  z-index: 100;
+}
+
+.l-avatar-group__item .l-avatar {
+  border: 2px solid var(--l-bg-surface);
+}