n-design-readonly-plugin 1.0.2 → 1.0.4

package/src/withReadonly.tsx

@@ -1,414 +0,0 @@
-// composables/withReadonly.ts
-import { defineComponent, h, computed, inject, provide, ref, watch, useAttrs, type PropType, type Component, type VNode, Ref } from 'vue';
-
-type FormModelValue = string | number | boolean | any[] | null | undefined;
-type ValueToLabelFn = (value: FormModelValue) => string;
-
-// ========================
-// 工具函数：提取静态文本（用于单个 checkbox/radio/select ）
-// ========================
-function extractStaticText(vnode: any): string {
-  if (vnode == null) return '';
-  if (typeof vnode === 'string') return vnode;
-  if (Array.isArray(vnode)) return vnode.map(extractStaticText).join('');
-  if (typeof vnode === 'object') {
-    if (typeof vnode.children === 'string') {
-      return vnode.children;
-    }
-    // 处理动态插槽内容
-    if (vnode?.default && typeof vnode.default === 'function') {
-      const dynamicContent = vnode.default();
-      if (Array.isArray(dynamicContent)) {
-        return extractStaticText(dynamicContent);
-      }
-    }
-    if (vnode.children) {
-      extractStaticText(vnode.children);
-    }
-  }
-  return '';
-}
-
-// ========================
-// 从插槽中提取 value → label 映射（支持 n-option / n-radio / n-checkbox / n-select）
-// ========================
-function collectOptionLabelMapFromSlots(vnodes: VNode | VNode[] | undefined, fieldNames: Record<string, string> = {}): Map<any, string> {
-  const labelMap = new Map<any, string>();
-  const { value: valKey = 'value', label: labelKey = 'label' } = fieldNames;
-
-  if (!vnodes) return labelMap;
-
-  const nodes = Array.isArray(vnodes) ? vnodes : [vnodes];
-
-  for (const vnode of nodes) {
-    if (!vnode || typeof vnode !== 'object') continue;
-
-    // 处理组件节点
-    if (vnode.type && (typeof vnode.type === 'object' || typeof vnode.type === 'function')) {
-      let compName = (vnode.type as any).name?.toLowerCase() || '';
-      if (typeof vnode.type === 'function') {
-        compName = (vnode.type as any).displayName?.toLowerCase() || '';
-      } else if (typeof vnode.type === 'string') {
-        compName = (vnode.type as any)?.toLowerCase() || '';
-      }
-      if (/option|radio|checkbox/i.test(compName)) {
-        const props = vnode.props || {};
-        const value = props[valKey] ?? props.value;
-        const labelText = props[labelKey] ?? props.label;
-        if (value != null) {
-          const label = extractStaticText(vnode.children) || labelText || String(value);
-          labelMap.set(value, label);
-        }
-      }
-    }
-
-    // 递归子节点
-    if (vnode.children) {
-      const childMap = collectOptionLabelMapFromSlots(vnode.children as any, fieldNames);
-      childMap.forEach((label, val) => {
-        if (!labelMap.has(val)) labelMap.set(val, label);
-      });
-    }
-  }
-
-  return labelMap;
-}
-
-// ========================
-// Cascader: 递归查找 label 路径
-// ========================
-function findCascaderLabels(options: any[], value: any[], fieldNames: Record<string, string>): string[] {
-  const { value: valKey = 'value', label: labelKey = 'label', children: childrenKey = 'children' } = fieldNames;
-  const labels: string[] = [];
-  let current = options;
-
-  for (const v of value) {
-    const node = current.find((item: any) => item[valKey] === v);
-    if (node) {
-      labels.push(node[labelKey] || node[valKey] || String(v));
-      current = node[childrenKey] || [];
-    } else {
-      labels.push(String(v));
-      break;
-    }
-  }
-  return labels;
-}
-
-// ========================
-// TreeSelect: 从 treeData 递归查找 label
-// ========================
-function findTreeSelectLabels(treeData: any[], value: any, fieldNames: Record<string, string>): string[] {
-  const { value: valKey = 'value', label: labelKey = 'title', children: childrenKey = 'children' } = fieldNames;
-  const labels: string[] = [];
-  const targetValues = new Set(Array.isArray(value) ? value : [value]);
-
-  function dfs(nodes: any[]) {
-    for (const node of nodes) {
-      if (targetValues.has(node[valKey])) {
-        labels.push(node[labelKey] || node[valKey]);
-      }
-      if (node[childrenKey]) {
-        dfs(node[childrenKey]);
-      }
-    }
-  }
-
-  dfs(treeData);
-  return labels;
-}
-
-// ========================
-// 获取只读显示文本
-// ========================
-function getDisplayText({
-  modelValue,
-  options,
-  treeData,
-  valueToLabel,
-  fieldNames,
-  slots,
-  isSelect,
-  isRadioGroup,
-  isCheckboxGroup,
-  isCheckbox,
-  isRadio,
-  isCascader,
-  isTreeSelect,
-  isSwitch,
-  attrs,
-  emptyText,
-}: {
-  modelValue: FormModelValue;
-  options?: any[];
-  treeData?: any[];
-  valueToLabel?: ValueToLabelFn;
-  fieldNames: Record<string, string>;
-  slots?: any;
-  isSelect: boolean;
-  isRadioGroup: boolean;
-  isCheckboxGroup: boolean;
-  isCheckbox: boolean;
-  isRadio: boolean;
-  isCascader: boolean;
-  isTreeSelect: boolean;
-  isSwitch: boolean;
-  attrs: Record<string, any>;
-  emptyText: string;
-}): string {
-  // 1. 自定义映射
-  if (valueToLabel) {
-    try {
-      return valueToLabel(modelValue) || emptyText;
-    } catch (e) {
-      console.warn('[ReadonlyHOC] valueToLabel error', e);
-    }
-  }
-
-  // 2. Switch 特殊处理
-  if (isSwitch) {
-    const checkedVal = attrs.checkedValue ?? attrs['checked-value'] ?? true;
-    const uncheckedVal = attrs.uncheckedValue ?? attrs['un-checked-value'] ?? false;
-    if (modelValue === checkedVal) return attrs.checkedChildren ?? attrs['checked-children'] ?? '开启';
-    if (modelValue === uncheckedVal) return attrs.uncheckedChildren ?? attrs['un-checked-children'] ?? '关闭';
-    return String(modelValue || emptyText);
-  }
-
-  // 3. Cascader
-  if (isCascader && Array.isArray(modelValue) && options?.length) {
-    return findCascaderLabels(options, modelValue, fieldNames).join(' / ') || emptyText;
-  }
-
-  // 4. TreeSelect
-  if (isTreeSelect && treeData?.length) {
-    return findTreeSelectLabels(treeData, modelValue, fieldNames).join(', ') || emptyText;
-  }
-
-  // 5. 动态 options（Select / RadioGroup / CheckboxGroup）
-  if (options?.length) {
-    const valKey = fieldNames.value || 'value';
-    const labelKey = fieldNames.label || 'label';
-    const getLabel = (val: any) => {
-      const opt = options.find(item => item[valKey] === val);
-      return opt ? opt[labelKey] || opt[valKey] : val === undefined || val === null ? '' : String(val);
-    };
-    if (Array.isArray(modelValue)) {
-      return modelValue.map(getLabel).join(', ') || emptyText;
-    } else {
-      return getLabel(modelValue) || emptyText;
-    }
-  }
-
-  // 6. 静态插槽 fallback（Select / RadioGroup / CheckboxGroup）
-  else if ((isSelect || isRadioGroup || isCheckboxGroup) && slots?.default) {
-    try {
-      const slotContent = slots.default();
-
-      const labelMap = collectOptionLabelMapFromSlots(slotContent, fieldNames);
-      if (labelMap.size > 0) {
-        const getLabel = (val: any) => (val === undefined || val === null ? '' : labelMap.get(val) || String(val));
-        if (Array.isArray(modelValue)) {
-          return modelValue.map(getLabel).join(', ') || emptyText;
-        } else {
-          return getLabel(modelValue) || emptyText;
-        }
-      }
-    } catch (e) {
-      console.warn('[ReadonlyHOC] Failed to parse slot options', e);
-    }
-  }
-
-  // 7. 单个 Checkbox / Radio 静态文本兜底
-  else if (slots?.default && (isCheckbox || isRadio) && typeof modelValue === 'boolean') {
-    try {
-      const content = slots.default();
-      const text = extractStaticText(content);
-      if (text) return text;
-    } catch (e) {
-      /* ignore */
-    }
-  }
-
-  // 8. 最终兜底
-  if (modelValue == null || modelValue === '') return emptyText;
-  return Array.isArray(modelValue) ? modelValue.join(', ') : String(modelValue);
-}
-
-// ========================
-// 高阶组件
-// ========================
-export function withReadonly(BaseComponent: Component) {
-  const baseName = BaseComponent.name || '';
-  const componentName = baseName.toLowerCase();
-
-  const isSelect = /select/i.test(componentName) && !/tree|cascader/i.test(componentName);
-  const isRadio = /radio/i.test(componentName) && !/group/i.test(componentName);
-  const isRadioGroup = /radio.*group/i.test(componentName);
-  const isCheckbox = /checkbox/i.test(componentName) && !/group/i.test(componentName);
-  const isCheckboxGroup = /checkbox.*group/i.test(componentName);
-  const isSwitch = /switch/i.test(componentName);
-  const isCascader = /cascader/i.test(componentName);
-  const isTreeSelect = /tree.*select/i.test(componentName);
-
-  const isCheckType = isCheckbox || isSwitch || isRadio;
-  const nativeProp = isCheckType ? 'checked' : 'value';
-  const updateEvent = `update:${nativeProp}`;
-
-  const isForm = /form$/i.test(componentName);
-  const isFormItem = /form.*item/i.test(componentName);
-
-  return defineComponent({
-    name: baseName,
-    inheritAttrs: false,
-    props: {
-      modelValue: { type: [String, Number, Boolean, Array, Object] as PropType<FormModelValue>, default: undefined },
-      [nativeProp]: { type: [String, Number, Boolean, Array, Object] as PropType<FormModelValue>, default: undefined },
-      readonly: { type: Boolean, default: undefined },
-      emptyText: { type: String, default: '--' },
-      valueToLabel: { type: Function as PropType<ValueToLabelFn>, default: null },
-    },
-    emits: ['update:modelValue', updateEvent],
-    setup(props, { emit, slots, expose }) {
-      const globalReadonly = inject<Ref<boolean>>('nkReadonly', ref(false));
-      const isReadonly = computed(() => props.readonly ?? globalReadonly.value);
-      const formReadonly = computed(() => props.readonly ?? globalReadonly.value);
-
-      if (isForm) provide('nkReadonly', formReadonly);
-
-      const finalValue = computed(() => (props[nativeProp] !== undefined ? props[nativeProp] : props.modelValue));
-
-      const emitUpdate = (val: FormModelValue) => {
-        emit('update:modelValue', val);
-        emit(updateEvent, val);
-      };
-
-      // ✅ 使用 useAttrs() 保证响应式
-      const attrs = useAttrs();
-
-      const displayText = computed(() => {
-        if (!isReadonly.value) return '';
-
-        const fieldNames = attrs.fieldNames ?? attrs['field-names'] ?? {};
-        const options = attrs.options as any[] | undefined;
-        const treeData = (attrs.treeData ?? attrs['tree-data']) as any[] | undefined;
-
-        return getDisplayText({
-          modelValue: finalValue.value as FormModelValue,
-          options,
-          treeData,
-          valueToLabel: props.valueToLabel as ValueToLabelFn,
-          fieldNames: fieldNames as Record<string, string>,
-          slots,
-          isSelect,
-          isRadioGroup,
-          isCheckboxGroup,
-          isCheckbox,
-          isRadio,
-          isCascader,
-          isTreeSelect,
-          isSwitch,
-          attrs,
-          emptyText: props.emptyText as string,
-        });
-      });
-
-      // ⚠️ 开发警告
-      if (import.meta?.env?.DEV) {
-        watch(
-          () => isReadonly.value,
-          readonly => {
-            if (
-              readonly &&
-              !attrs.options &&
-              !attrs.treeData &&
-              !props.valueToLabel &&
-              slots?.default &&
-              (isSelect || isRadioGroup || isCheckboxGroup || isCascader || isTreeSelect)
-            ) {
-              console.warn(
-                `[ReadonlyHOC] Detected slot-only usage for  ${baseName} in readonly mode. ` +
-                  `This works for static content, but will fail for async/dynamic data. ` +
-                  `✅ Recommended: Use \`options\` or \`treeData\` prop instead.`
-              );
-            }
-          },
-          { immediate: true }
-        );
-      }
-
-      const readonlyStyle = {
-        lineHeight: '32px',
-        padding: '0 6px',
-        display: 'inline-block',
-        minHeight: '32px',
-        border: 'none',
-        backgroundColor: 'none',
-        cursor: 'default',
-        wordBreak: 'break-all',
-        color: 'rgba(0, 0, 0, 0.65)',
-      };
-
-      const formRef = ref<any>();
-      if (isForm) {
-        expose({
-          validate: () => (isReadonly.value ? Promise.resolve({}) : formRef.value?.validate?.()),
-          validateFields: (names?: string[]) => (isReadonly.value ? Promise.resolve({}) : formRef.value?.validateFields?.(names)),
-          resetFields: (names?: string[]) => !isReadonly.value && formRef.value?.resetFields?.(names),
-          clearValidate: (names?: string[]) => !isReadonly.value && formRef.value?.clearValidate?.(names),
-          scrollToField: (name: string) => !isReadonly.value && formRef.value?.scrollToField?.(name),
-        });
-      }
-
-      return () => {
-        if (isFormItem) {
-          return h(
-            BaseComponent,
-            {
-              ...attrs,
-              style: { ...(attrs.style || {}), marginBottom: isReadonly.value ? '10px' : undefined },
-            },
-            slots
-          );
-        }
-
-        if (isForm) {
-          return h(
-            BaseComponent,
-            {
-              ...attrs,
-              rules: formReadonly.value ? null : attrs.rules,
-              disabled: formReadonly.value ? true : attrs.disabled,
-              ref: formRef,
-            },
-            slots
-          );
-        }
-
-        if (isReadonly.value) {
-          return h(
-            'span',
-            {
-              class: 'nk-readonly-wrapper',
-              style: readonlyStyle,
-              role: 'text',
-              tabindex: 0,
-              'aria-readonly': 'true',
-            },
-            displayText.value
-          );
-        }
-
-        return h(
-          BaseComponent,
-          {
-            ...attrs,
-            [nativeProp]: finalValue.value,
-            [`onUpdate:${nativeProp}`]: emitUpdate,
-            ref: isForm ? formRef : undefined,
-          },
-          slots
-        );
-      };
-    },
-  });
-}

package/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2020", "DOM"],
-    "moduleResolution": "bundler",
-    "strict": true,
-    "jsx": "preserve",
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "declaration": true,
-    "declarationDir": "./dist",
-    "outDir": "./dist",
-    "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true
-  },
-  "include": ["src"]
-}

package/vite.config.playground.ts

@@ -1,17 +0,0 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import { resolve } from 'path'
-
-export default defineConfig({
-  root: 'playground',
-  plugins: [vue()],
-  resolve: {
-    alias: {
-      '@': resolve(__dirname, 'src'),
-    },
-  },
-  server: {
-    host: '0.0.0.0',
-    port: 5200,
-  },
-})

package/vite.config.ts

@@ -1,20 +0,0 @@
-import { resolve } from 'path';
-import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
-
-export default defineConfig({
-  build: {
-    lib: {
-      entry: resolve(__dirname, 'src/index.ts'),
-      name: 'NDesignReadolyPlugin',
-      fileName: (format) => `index.${format}.js`,
-      formats: ['es', 'cjs']
-    },
-    rollupOptions: {
-      // external 排除 vue 和 n-designv3
-      external: ['vue','n-designv3'],
-      output: { globals: { vue: 'Vue' } }
-    }
-  },
-  plugins: [dts({ insertTypesEntry: true })]
-});