qm-law-ui 0.0.1

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "qm-law-ui",
+  "version": "0.0.1",
+  "description": "Law0S Design System components built on Vue 3 and Element Plus",
+  "type": "module",
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./theme.css": "./dist/theme.css",
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite --config examples/vite.config.ts",
+    "preview": "vite preview --config examples/vite.config.ts",
+    "build": "vue-tsc --noEmit && vite build",
+    "prepublishOnly": "pnpm run build"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "element-plus",
+    "component-library",
+    "qm-law-ui"
+  ],
+  "license": "MIT",
+  "packageManager": "pnpm@10.30.3",
+  "pnpm": {
+    "overrides": {
+      "vite": "^5.4.11"
+    }
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0",
+    "element-plus": ">=2.10.0 <2.14.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.0",
+    "@vitejs/plugin-vue": "5.2.4",
+    "element-plus": "2.13.1",
+    "terser": "^5.36.0",
+    "typescript": "~5.6.3",
+    "vite": "5.4.21",
+    "vite-plugin-dts": "4.5.4",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.1.10"
+  }
+}

package/src/components/law-button/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <el-button
+    v-bind="mergedProps"
+    :style="computedStyle"
+    class="law-button"
+    @click="onClick"
+  >
+    <slot />
+    <template v-if="$slots.loading" #loading>
+      <slot name="loading" />
+    </template>
+    <template v-if="$slots.icon" #icon>
+      <slot name="icon" />
+    </template>
+  </el-button>
+</template>
+
+<script setup lang="ts">
+import { ElButton } from 'element-plus'
+import { computed, useAttrs } from 'vue'
+import type { LawButtonProps, LawButtonSize } from './types'
+
+defineOptions({
+  name: 'LawButton',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<LawButtonProps>(), {
+  lawSize: 'md',
+})
+
+const emit = defineEmits<{
+  click: [evt: MouseEvent]
+}>()
+
+const attrs = useAttrs()
+
+const elSizeMap: Record<LawButtonSize, 'large' | 'default' | 'small'> = {
+  lg: 'large',
+  md: 'default',
+  sm: 'small',
+}
+
+const mergedProps = computed(() => {
+  const { lawSize, size, ...rest } = props
+  return {
+    ...attrs,
+    ...rest,
+    size: size ?? elSizeMap[lawSize],
+  }
+})
+
+const computedStyle = computed(() => {
+  const heightMap: Record<LawButtonSize, string> = {
+    lg: 'var(--law-btn-size-lg)',
+    md: 'var(--law-btn-size-md)',
+    sm: 'var(--law-btn-size-sm)',
+  }
+  return {
+    minHeight: heightMap[props.lawSize],
+  }
+})
+
+function onClick(evt: MouseEvent) {
+  emit('click', evt)
+}
+</script>
+
+<style scoped>
+.law-button {
+  font-family: var(--law-font-family-zh);
+  border-radius: var(--law-radius-sm);
+}
+
+.law-button.el-button--default:not(.is-disabled):hover {
+  background-color: var(--law-btn-default-hover-bg);
+  color: var(--law-btn-default-hover-color);
+  border-color: var(--law-primary);
+}
+
+.law-button.el-button--primary:not(.is-disabled):hover {
+  background-color: var(--law-btn-primary-hover-bg);
+  color: var(--law-btn-primary-hover-color);
+  border-color: var(--law-btn-primary-hover-bg);
+}
+
+.law-button.el-button--success:not(.is-disabled):hover {
+  background-color: var(--law-btn-success-hover-bg);
+  color: var(--law-btn-success-hover-color);
+}
+
+.law-button.el-button--warning:not(.is-disabled):hover {
+  background-color: var(--law-btn-warning-hover-bg);
+  color: var(--law-btn-warning-hover-color);
+}
+
+.law-button.el-button--danger:not(.is-disabled):hover {
+  background-color: var(--law-btn-danger-hover-bg);
+  color: var(--law-btn-danger-hover-color);
+}
+
+.law-button.el-button--info:not(.is-disabled):hover {
+  background-color: var(--law-btn-info-hover-bg);
+  color: var(--law-btn-info-hover-color);
+}
+</style>

package/src/components/law-button/types.ts

@@ -0,0 +1,22 @@
+import type {
+  ButtonEmits,
+  ButtonProps,
+} from "element-plus/es/components/button";
+
+/** Law 按钮尺寸（对齐 Law0S 设计规范） */
+export type LawButtonSize = "lg" | "md" | "sm";
+
+export interface LawButtonOwnProps {
+  /** Law 设计规范尺寸，映射至 Element Plus size */
+  lawSize?: LawButtonSize;
+}
+
+export type LawButtonProps = LawButtonOwnProps & Partial<ButtonProps>;
+
+export type LawButtonEmits = ButtonEmits;
+
+export type LawButtonSlots = {
+  default?: () => unknown;
+  loading?: () => unknown;
+  icon?: () => unknown;
+};

package/src/components/law-dialog/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <el-dialog
+    v-bind="mergedProps"
+    class="law-dialog"
+    @open="onOpen"
+    @opened="onOpened"
+    @close="onClose"
+    @closed="onClosed"
+    @update:model-value="onUpdateModelValue"
+    @open-auto-focus="onOpenAutoFocus"
+    @close-auto-focus="onCloseAutoFocus"
+  >
+    <slot />
+    <template v-if="$slots.header" #header="headerProps">
+      <slot name="header" v-bind="headerProps" />
+    </template>
+    <template v-if="$slots.title" #title>
+      <slot name="title" />
+    </template>
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer" />
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ElDialog } from 'element-plus'
+import { computed, useAttrs } from 'vue'
+import type { LawDialogProps } from './types'
+
+defineOptions({
+  name: 'LawDialog',
+  inheritAttrs: false,
+})
+
+const props = defineProps<LawDialogProps>()
+
+const emit = defineEmits<{
+  open: []
+  opened: []
+  close: []
+  closed: []
+  'update:modelValue': [value: boolean]
+  openAutoFocus: []
+  closeAutoFocus: []
+}>()
+
+const attrs = useAttrs()
+
+const mergedProps = computed(() => ({
+  ...attrs,
+  ...props,
+}))
+
+function onOpen() {
+  emit('open')
+}
+
+function onOpened() {
+  emit('opened')
+}
+
+function onClose() {
+  emit('close')
+}
+
+function onClosed() {
+  emit('closed')
+}
+
+function onUpdateModelValue(value: boolean) {
+  emit('update:modelValue', value)
+}
+
+function onOpenAutoFocus() {
+  emit('openAutoFocus')
+}
+
+function onCloseAutoFocus() {
+  emit('closeAutoFocus')
+}
+</script>
+
+<style scoped>
+.law-dialog {
+  --el-dialog-border-radius: var(--law-radius-md);
+  font-family: var(--law-font-family-zh);
+}
+
+.law-dialog :deep(.el-dialog__header) {
+  color: var(--law-text-primary);
+  font-weight: var(--law-font-weight-semibold);
+}
+
+.law-dialog :deep(.el-dialog__body) {
+  color: var(--law-text-regular);
+  font-size: var(--law-font-size-body);
+  line-height: var(--law-line-height-body);
+}
+</style>

package/src/components/law-dialog/types.ts

@@ -0,0 +1,12 @@
+import type { DialogEmits, DialogProps } from 'element-plus/es/components/dialog'
+
+export type LawDialogProps = Partial<DialogProps>
+
+export type LawDialogEmits = DialogEmits
+
+export type LawDialogSlots = {
+  default?: () => unknown
+  header?: (props: { close: () => void; titleId: string; titleClass: string }) => unknown
+  title?: () => unknown
+  footer?: () => unknown
+}

package/src/env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<object, object, unknown>
+  export default component
+}
+
+declare module '*.css' {
+  const css: string
+  export default css
+}

package/src/hooks/use-law-theme.ts

@@ -0,0 +1,66 @@
+import { ref, type Ref } from 'vue'
+
+export type LawThemeMode = 'light' | 'dark'
+
+export interface UseLawThemeReturn {
+  mode: Ref<LawThemeMode>
+  setTheme: (theme: LawThemeMode) => void
+  toggleTheme: () => void
+  isDark: () => boolean
+}
+
+const THEME_ATTR = 'data-theme'
+const DARK_CLASS = 'dark'
+
+function applyTheme(theme: LawThemeMode) {
+  if (typeof document === 'undefined') return
+
+  const root = document.documentElement
+
+  if (theme === 'dark') {
+    root.setAttribute(THEME_ATTR, 'dark')
+    root.classList.add(DARK_CLASS)
+  } else {
+    root.removeAttribute(THEME_ATTR)
+    root.classList.remove(DARK_CLASS)
+  }
+}
+
+function detectTheme(): LawThemeMode {
+  if (typeof document === 'undefined') return 'light'
+
+  const root = document.documentElement
+  if (
+    root.getAttribute(THEME_ATTR) === 'dark'
+    || root.classList.contains(DARK_CLASS)
+  ) {
+    return 'dark'
+  }
+  return 'light'
+}
+
+export function useLawTheme(initial: LawThemeMode = 'light'): UseLawThemeReturn {
+  const mode = ref<LawThemeMode>(detectTheme() || initial)
+
+  function setTheme(theme: LawThemeMode) {
+    mode.value = theme
+    applyTheme(theme)
+  }
+
+  function toggleTheme() {
+    setTheme(mode.value === 'dark' ? 'light' : 'dark')
+  }
+
+  function isDark() {
+    return mode.value === 'dark'
+  }
+
+  applyTheme(mode.value)
+
+  return {
+    mode,
+    setTheme,
+    toggleTheme,
+    isDark,
+  }
+}

package/src/index.ts

@@ -0,0 +1,35 @@
+import type { App, Plugin } from 'vue'
+import LawButton from './components/law-button/index.vue'
+import LawDialog from './components/law-dialog/index.vue'
+
+export { LawButton, LawDialog }
+export { useLawTheme } from './hooks/use-law-theme'
+export type { LawThemeMode, UseLawThemeReturn } from './hooks/use-law-theme'
+export * from './utils'
+export type {
+  LawButtonProps,
+  LawButtonEmits,
+  LawButtonSlots,
+  LawButtonSize,
+  LawButtonOwnProps,
+} from './components/law-button/types'
+export type {
+  LawDialogProps,
+  LawDialogEmits,
+  LawDialogSlots,
+} from './components/law-dialog/types'
+
+const components = [LawButton, LawDialog] as const
+
+const LawUI: Plugin = {
+  install(app: App) {
+    components.forEach((component) => {
+      const name = component.name
+      if (name) {
+        app.component(name, component)
+      }
+    })
+  },
+}
+
+export default LawUI

package/src/styles/theme.css

@@ -0,0 +1,84 @@
+/**
+ * LawUI Theme Mapping Layer
+ * Maps Law0S Design Tokens (--law-*) to Element Plus (--el-*)
+ */
+@import "./variables.css";
+
+:root,
+:root.dark,
+html.dark,
+[data-theme="dark"] {
+  /* Brand & functional colors */
+  --el-color-primary: var(--law-color-primary);
+  --el-color-success: var(--law-color-success);
+  --el-color-warning: var(--law-color-warning);
+  --el-color-danger: var(--law-color-danger);
+  --el-color-error: var(--law-color-danger);
+  --el-color-info: var(--law-color-info);
+
+  --el-color-primary-light-3: var(--law-primary-300);
+  --el-color-primary-light-5: var(--law-primary-200);
+  --el-color-primary-light-7: var(--law-primary-100);
+  --el-color-primary-light-8: var(--law-primary-50);
+  --el-color-primary-light-9: var(--law-primary-50);
+  --el-color-primary-dark-2: var(--law-primary-600);
+
+  /* Typography */
+  --el-font-family: var(--law-font-family-zh);
+  --el-font-size-extra-large: var(--law-font-size-h1);
+  --el-font-size-large: var(--law-font-size-h3);
+  --el-font-size-medium: var(--law-font-size-h4);
+  --el-font-size-base: var(--law-font-size-body);
+  --el-font-size-small: var(--law-font-size-caption);
+  --el-font-size-extra-small: var(--law-font-size-mini);
+  --el-font-weight-primary: var(--law-font-weight-medium);
+  --el-font-line-height-primary: var(--law-line-height-body);
+
+  /* Text colors */
+  --el-text-color-primary: var(--law-text-primary);
+  --el-text-color-regular: var(--law-text-regular);
+  --el-text-color-secondary: var(--law-text-secondary);
+  --el-text-color-placeholder: var(--law-text-placeholder);
+  --el-text-color-disabled: var(--law-text-color-disabled);
+
+  /* Border */
+  --el-border-width: var(--law-border-width);
+  --el-border-color: var(--law-border-color);
+  --el-border-color-light: var(--law-border-color-light);
+  --el-border-color-lighter: var(--law-border-color-lighter);
+  --el-border-color-hover: var(--law-border-color);
+
+  /* Background & fill */
+  --el-bg-color: var(--law-bg-white);
+  --el-bg-color-page: var(--law-bg-page);
+  --el-bg-color-overlay: var(--law-bg-white);
+  --el-fill-color: var(--law-fill-color);
+  --el-fill-color-light: var(--law-fill-color-light);
+  --el-fill-color-lighter: var(--law-border-color-lighter);
+  --el-fill-color-blank: var(--law-fill-color-blank);
+  --el-disabled-bg-color: var(--law-bg-disabled);
+  --el-disabled-text-color: var(--law-text-placeholder);
+  --el-disabled-border-color: var(--law-border-color-light);
+
+  /* Radius */
+  --el-border-radius-base: var(--law-radius-sm);
+  --el-border-radius-small: var(--law-radius-sm);
+  --el-border-radius-round: var(--law-radius-lg);
+
+  /* Shadow */
+  --el-box-shadow: var(--law-box-shadow);
+  --el-box-shadow-light: var(--law-shadow-sm);
+  --el-box-shadow-lighter: var(--law-shadow-sm);
+  --el-box-shadow-dark: var(--law-shadow-lg);
+
+  /* Component size (align with Law button tokens) */
+  --el-component-size-large: var(--law-btn-size-lg);
+  --el-component-size: var(--law-btn-size-md);
+  --el-component-size-small: var(--law-btn-size-sm);
+}
+
+:root.dark,
+html.dark,
+[data-theme="dark"] {
+  color-scheme: dark;
+}

package/src/styles/variables.css

@@ -0,0 +1,192 @@
+/**
+ * Law0S Design System - Theme Variables
+ * Based on Law0S Design Specification
+ */
+
+:root {
+  /* ========================================
+     Brand Color - 品牌色
+     ======================================== */
+  --law-primary: #2664ff;
+  --law-color-primary: var(--law-primary);
+  --law-primary-900: #0a1654;
+  --law-primary-800: #0d214b;
+  --law-primary-700: #102e66;
+  --law-primary-600: #154089;
+  --law-primary-500: #1b57ad;
+  --law-primary-400: #2564ff;
+  --law-primary-300: #5584ff;
+  --law-primary-200: #89adff;
+  --law-primary-100: #bdd0ff;
+  --law-primary-50: #e8f0ff;
+
+  /* ========================================
+     Button Size - 按钮尺寸（含边框）
+     ======================================== */
+  --law-btn-size-lg: 40px;
+  --law-btn-size-md: 32px;
+  --law-btn-size-sm: 28px;
+
+  /* ========================================
+     Tooltip - 文字提示
+     ======================================== */
+  --law-tooltip-bg: #303133;
+  --law-tooltip-border: #303133;
+  --law-tooltip-color: #ffffff;
+
+  /* ========================================
+     Button Hover State - 按钮悬停状态
+     ======================================== */
+  --law-btn-default-hover-bg: #f0f4ff;
+  --law-btn-default-hover-color: var(--law-primary);
+  --law-btn-primary-hover-bg: #1b51e0;
+  --law-btn-primary-hover-color: #ffffff;
+  --law-btn-info-hover-bg: #1b51e0;
+  --law-btn-info-hover-color: #ffffff;
+  --law-btn-success-hover-bg: #2ab45a;
+  --law-btn-success-hover-color: #ffffff;
+  --law-btn-warning-hover-bg: #e67326;
+  --law-btn-warning-hover-color: #ffffff;
+  --law-btn-danger-hover-bg: #d94a41;
+  --law-btn-danger-hover-color: #ffffff;
+
+  /* ========================================
+     Functional Color - 功能色
+     ======================================== */
+  --law-color-info: #2664ff;
+  --law-color-success: #34c759;
+  --law-color-warning: #ff7f2c;
+  --law-color-danger: #ee5249;
+
+  /* ========================================
+     Text Color - 文字颜色（语义化）
+     ======================================== */
+  --law-text-primary: #111111;
+  --law-text-regular: #434c59;
+  --law-text-secondary: #86899c;
+  --law-text-placeholder: #c2c6cc;
+
+  /* ========================================
+     Border Color - 边框色（语义化）
+     ======================================== */
+  --law-border-width: 1px;
+  --law-border-color: #d8dce4;
+  --law-border-color-light: #eaedf6;
+  --law-border-color-lighter: #f4f5f7;
+
+  /* ========================================
+     Background Color - 背景色（语义化）
+     ======================================== */
+  --law-bg-white: #ffffff;
+  --law-bg-page: #fafbfe;
+  --law-bg-card: #f4f7fc;
+  --law-bg-hover: #eaedf6;
+  --law-bg-fill: #ebebeb;
+  --law-bg-disabled: #d8dce4;
+
+  /* ========================================
+     AI Gradient - AI 渐变色
+     ======================================== */
+  --law-ai-gradient-start: #a855f7;
+  --law-ai-gradient-end: #e8d5f5;
+
+  /* ========================================
+     Typography - 字体
+     ======================================== */
+  --law-font-family-zh: "PingFang SC", "Microsoft YaHei", sans-serif;
+  --law-font-family-en:
+    -apple-system, "San Francisco", "Segoe UI", "Roboto", sans-serif;
+  --law-font-family-number: "Roboto", sans-serif;
+
+  --law-font-size-display: 30px;
+  --law-font-size-h1: 24px;
+  --law-font-size-h2: 20px;
+  --law-font-size-h3: 18px;
+  --law-font-size-h4: 16px;
+  --law-font-size-body: 14px;
+  --law-font-size-caption: 12px;
+  --law-font-size-mini: 10px;
+
+  --law-font-size-lg: var(--law-font-size-display);
+  --law-font-size-md: var(--law-font-size-body);
+  --law-font-size-sm: var(--law-font-size-caption);
+  --law-font-size-xs: var(--law-font-size-mini);
+
+  --law-line-height-display: 40px;
+  --law-line-height-h1: 36px;
+  --law-line-height-h2: 32px;
+  --law-line-height-h3: 28px;
+  --law-line-height-h4: 24px;
+  --law-line-height-body: 20px;
+  --law-line-height-caption: 18px;
+  --law-line-height-mini: 14px;
+
+  --law-font-weight-regular: 400;
+  --law-font-weight-medium: 500;
+  --law-font-weight-semibold: 600;
+  --law-font-weight-bold: 700;
+
+  --law-font-weight-normal: var(--law-font-weight-regular);
+  --law-font-weight-thick: var(--law-font-weight-semibold);
+
+  --law-text-color-primary: var(--law-text-primary);
+  --law-text-color-regular: var(--law-text-regular);
+  --law-text-color-secondary: var(--law-text-secondary);
+  --law-text-color-placeholder: var(--law-text-placeholder);
+  --law-text-color-disabled: var(--law-text-placeholder);
+
+  /* ========================================
+     Border Radius - 圆角
+     ======================================== */
+  --law-radius-sm: 4px;
+  --law-radius-md: 8px;
+  --law-radius-lg: 12px;
+  --law-radius-full: 50%;
+
+  /* ========================================
+     Fill Color - 填充色
+     ======================================== */
+  --law-fill-color: var(--law-bg-fill);
+  --law-fill-color-light: var(--law-bg-hover);
+  --law-fill-color-blank: var(--law-bg-white);
+
+  /* ========================================
+     Shadow - 阴影（亮色模式）
+     ======================================== */
+  --law-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --law-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
+  --law-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);
+  --law-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.16);
+  --law-box-shadow: var(--law-shadow-md);
+}
+
+/* ========================================
+   Dark Mode - 暗色模式
+   ======================================== */
+[data-theme="dark"] {
+  --law-text-primary: #e5eaf3;
+  --law-text-regular: #cfd3dc;
+  --law-text-secondary: #8c8c8c;
+  --law-text-placeholder: #5c5c5c;
+
+  --law-border-color: #4c4d4f;
+  --law-border-color-light: #3a3a3c;
+  --law-border-color-lighter: #2d2d2f;
+
+  --law-bg-white: #1a1a1e;
+  --law-bg-page: #0a0a0c;
+  --law-bg-card: #141418;
+  --law-bg-hover: #1c1c22;
+  --law-bg-fill: #242428;
+  --law-bg-disabled: #1a1a1e;
+
+  --law-fill-color: #242428;
+  --law-fill-color-light: #1c1c22;
+  --law-fill-color-blank: var(--law-bg-white);
+
+  --law-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --law-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.32);
+  --law-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.44);
+  --law-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.56);
+  --law-box-shadow: var(--law-shadow-md);
+}