qm-law-ui 0.0.1 → 0.0.2

package/README.md

@@ -33,6 +33,8 @@ import "qm-law-ui/style.css"; // ③ 组件聚合样式（构建产物）
 
 > **顺序不可调换**：`element-plus.css` → `qm-law-ui/theme.css` → `qm-law-ui/style.css`
 
+**无需配置 Vite alias**。自 `0.0.2` 起，`dist/theme.css` 会随包发布，直接 `import 'qm-law-ui/theme.css'` 即可。若你曾用 `0.0.1` 并配置了指向 `src/styles/theme.css` 的 alias，请删除该 alias 并升级到 `0.0.2+`。
+
 ## 插件注册
 
 ```ts

package/{src/styles/variables.css → dist/theme.css}

@@ -190,3 +190,86 @@
   --law-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.56);
   --law-box-shadow: var(--law-shadow-md);
 }
+
+/**
+ * LawUI Theme Mapping Layer
+ * Maps Law0S Design Tokens (--law-*) to Element Plus (--el-*)
+ */
+: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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qm-law-ui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Law0S Design System components built on Vue 3 and Element Plus",
   "type": "module",
   "main": "./dist/index.umd.cjs",
@@ -15,14 +15,17 @@
     "./theme.css": "./dist/theme.css",
     "./style.css": "./dist/style.css"
   },
+  "sideEffects": [
+    "**/*.css",
+    "dist/**/*.css"
+  ],
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "scripts": {
     "dev": "vite --config examples/vite.config.ts",
     "preview": "vite preview --config examples/vite.config.ts",
-    "build": "vue-tsc --noEmit && vite build",
+    "build": "vue-tsc --noEmit && vite build && node -e \"require('node:fs').accessSync('dist/theme.css')\"",
     "prepublishOnly": "pnpm run build"
   },
   "keywords": [

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

@@ -1,106 +0,0 @@
-<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

@@ -1,22 +0,0 @@
-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

@@ -1,100 +0,0 @@
-<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

@@ -1,12 +0,0 @@
-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

@@ -1,12 +0,0 @@
-/// <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

@@ -1,66 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,84 +0,0 @@
-/**
- * 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/utils/index.ts

@@ -1,32 +0,0 @@
-import type { LawThemeMode } from '../hooks/use-law-theme'
-
-const THEME_ATTR = 'data-theme'
-const DARK_CLASS = 'dark'
-
-/** 判断当前是否为暗色模式 */
-export function isLawDarkMode(): boolean {
-  if (typeof document === 'undefined') return false
-
-  const root = document.documentElement
-  return root.getAttribute(THEME_ATTR) === 'dark' || root.classList.contains(DARK_CLASS)
-}
-
-/** 获取当前主题模式 */
-export function getLawThemeMode(): LawThemeMode {
-  return isLawDarkMode() ? 'dark' : 'light'
-}
-
-/** 合并 class 名称 */
-export function mergeLawClass(...classes: Array<string | false | null | undefined>): string {
-  return classes.filter(Boolean).join(' ')
-}
-
-/** 将 Law 按钮尺寸映射为 Element Plus size */
-export function mapLawButtonSize(size: 'lg' | 'md' | 'sm'): 'large' | 'default' | 'small' {
-  const map = {
-    lg: 'large',
-    md: 'default',
-    sm: 'small',
-  } as const
-  return map[size]
-}