niuma-ui 1.1.12 → 1.2.1

package/src/components/RsMarkdown.vue

@@ -1,348 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useRsI18n } from '../composables/useRsI18n'
-import RsButton from './RsButton.vue'
-import RsCodeEditor from './RsCodeEditor.vue'
-import type { RsCodeEditorTheme } from './code-editor-utils'
-import {
-  renderMarkdown,
-  resolveMarkdownHeight,
-  resolveMarkdownMode,
-  type RsMarkdownMode,
-} from './markdown-utils'
-
-const model = defineModel<string>({ default: '' })
-const mode = defineModel<RsMarkdownMode>('mode', { default: 'edit' })
-
-const props = withDefaults(
-  defineProps<{
-    /** 只读：强制预览并隐藏模式切换 */
-    readonly?: boolean
-    height?: number | string
-    placeholder?: string
-    theme?: RsCodeEditorTheme
-    rounded?: boolean
-    /** 是否显示编辑/预览/分栏切换，默认 true（readonly 时强制隐藏） */
-    showModeToggle?: boolean
-    /** GFM 单个换行转 <br>，默认 true */
-    breaks?: boolean
-    disabled?: boolean
-  }>(),
-  {
-    readonly: false,
-    theme: 'auto',
-    rounded: true,
-    showModeToggle: true,
-    breaks: true,
-    disabled: false,
-  },
-)
-
-const { t } = useRsI18n()
-
-const activeMode = computed(() => resolveMarkdownMode(mode.value, props.readonly))
-
-const showToggle = computed(() => props.showModeToggle && !props.readonly && !props.disabled)
-
-const rootStyle = computed(() => ({
-  height: resolveMarkdownHeight(props.height),
-}))
-
-const previewHtml = computed(() =>
-  renderMarkdown(model.value, { breaks: props.breaks }),
-)
-
-const editorPlaceholder = computed(
-  () => props.placeholder ?? t('markdown.placeholder'),
-)
-
-const modeItems = computed(() => [
-  { value: 'edit' as const, label: t('markdown.edit') },
-  { value: 'preview' as const, label: t('markdown.preview') },
-  { value: 'split' as const, label: t('markdown.split') },
-])
-
-function setMode(next: RsMarkdownMode): void {
-  if (props.readonly || props.disabled) return
-  mode.value = next
-}
-</script>
-
-<template>
-  <div
-    class="rs-markdown"
-    :class="[
-      `rs-markdown--${activeMode}`,
-      {
-        'rs-markdown--rounded': rounded,
-        'rs-markdown--readonly': readonly,
-        'rs-markdown--disabled': disabled,
-        'rs-markdown--with-toggle': showToggle,
-      },
-    ]"
-    :style="rootStyle"
-  >
-    <div v-if="showToggle" class="rs-markdown__toolbar" role="tablist" :aria-label="t('markdown.modes')">
-      <RsButton
-        v-for="item in modeItems"
-        :key="item.value"
-        size="sm"
-        :variant="activeMode === item.value ? 'secondary' : 'ghost'"
-        :aria-selected="activeMode === item.value"
-        role="tab"
-        @click="setMode(item.value)"
-      >
-        {{ item.label }}
-      </RsButton>
-    </div>
-
-    <div class="rs-markdown__body">
-      <div
-        v-if="activeMode === 'edit' || activeMode === 'split'"
-        class="rs-markdown__editor"
-      >
-        <RsCodeEditor
-          v-model="model"
-          language="markdown"
-          :theme="theme"
-          :placeholder="editorPlaceholder"
-          :readonly="readonly || disabled"
-          :disabled="disabled"
-          :show-toolbar="false"
-          :rounded="false"
-          embedded
-          height="100%"
-        />
-      </div>
-
-      <div
-        v-if="activeMode === 'preview' || activeMode === 'split'"
-        class="rs-markdown__preview rs-native-scrollbar"
-        :class="{ 'rs-markdown__preview--empty': !previewHtml }"
-      >
-        <div
-          v-if="previewHtml"
-          class="rs-markdown__prose"
-          v-html="previewHtml"
-        />
-        <p v-else class="rs-markdown__empty">{{ t('markdown.empty') }}</p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style>
-.rs-markdown {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  min-width: 0;
-  box-sizing: border-box;
-  border: 1px solid var(--rs-border);
-  background: var(--rs-surface);
-  color: var(--rs-text);
-  overflow: hidden;
-}
-.rs-markdown--rounded {
-  border-radius: var(--rs-radius);
-}
-.rs-markdown--disabled {
-  opacity: 0.65;
-  pointer-events: none;
-}
-.rs-markdown__toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--rs-space-xs);
-  flex: 0 0 auto;
-  padding: var(--rs-space-xs) var(--rs-space-sm);
-  border-bottom: 1px solid var(--rs-border);
-  background: color-mix(in srgb, var(--rs-surface) 88%, var(--rs-muted-bg, var(--rs-border)) 12%);
-}
-.rs-markdown__body {
-  display: flex;
-  flex: 1 1 auto;
-  min-height: 0;
-  min-width: 0;
-}
-.rs-markdown--edit .rs-markdown__body,
-.rs-markdown--preview .rs-markdown__body {
-  flex-direction: column;
-}
-.rs-markdown--split .rs-markdown__body {
-  flex-direction: row;
-}
-.rs-markdown__editor,
-.rs-markdown__preview {
-  flex: 1 1 auto;
-  min-width: 0;
-  min-height: 0;
-}
-.rs-markdown--split .rs-markdown__editor {
-  border-right: 1px solid var(--rs-border);
-}
-.rs-markdown__preview {
-  overflow: auto;
-  padding: var(--rs-space-md) var(--rs-space-lg);
-  background: var(--rs-surface);
-}
-.rs-markdown__preview--empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.rs-markdown__empty {
-  margin: 0;
-  color: var(--rs-muted);
-  font-size: var(--rs-font-size-sm);
-}
-.rs-markdown__prose {
-  max-width: 48rem;
-  font-size: var(--rs-font-size-sm);
-  line-height: var(--rs-line-height-normal, 1.65);
-  word-break: break-word;
-}
-.rs-markdown__prose > :first-child {
-  margin-top: 0;
-}
-.rs-markdown__prose > :last-child {
-  margin-bottom: 0;
-}
-.rs-markdown__prose h1,
-.rs-markdown__prose h2,
-.rs-markdown__prose h3,
-.rs-markdown__prose h4 {
-  margin: 1.25em 0 0.5em;
-  font-weight: var(--rs-font-weight-semibold);
-  line-height: 1.3;
-  letter-spacing: -0.01em;
-  color: var(--rs-text);
-}
-.rs-markdown__prose h1 {
-  font-size: 1.5em;
-}
-.rs-markdown__prose h2 {
-  font-size: 1.25em;
-}
-.rs-markdown__prose h3 {
-  font-size: 1.1em;
-}
-.rs-markdown__prose p,
-.rs-markdown__prose ul,
-.rs-markdown__prose ol,
-.rs-markdown__prose blockquote,
-.rs-markdown__prose pre,
-.rs-markdown__prose .rs-markdown__codeblock,
-.rs-markdown__prose .rs-markdown__table-wrap {
-  margin: 0.75em 0;
-}
-.rs-markdown__prose ul,
-.rs-markdown__prose ol {
-  padding-left: 1.4em;
-}
-.rs-markdown__prose li + li {
-  margin-top: 0.25em;
-}
-.rs-markdown__prose a {
-  color: var(--rs-primary);
-  text-decoration: underline;
-  text-underline-offset: 0.15em;
-  cursor: pointer;
-}
-.rs-markdown__prose a code {
-  color: inherit;
-}
-.rs-markdown__prose a:hover {
-  opacity: 0.85;
-}
-.rs-markdown__prose strong {
-  font-weight: var(--rs-font-weight-semibold);
-}
-.rs-markdown__prose blockquote {
-  padding: 0.15em 0 0.15em 0.9em;
-  border-left: 3px solid var(--rs-border);
-  color: var(--rs-muted);
-}
-.rs-markdown__prose hr {
-  margin: 1.25em 0;
-  border: 0;
-  border-top: 1px solid var(--rs-border);
-}
-.rs-markdown__prose code {
-  padding: 0.1em 0.35em;
-  border-radius: calc(var(--rs-radius) * 0.6);
-  background: color-mix(in srgb, var(--rs-muted-bg, var(--rs-border)) 55%, transparent);
-  font-family: var(--rs-font-mono);
-  font-size: 0.9em;
-}
-.rs-markdown__codeblock {
-  overflow: hidden;
-  border: 1px solid var(--rs-border);
-  border-radius: var(--rs-radius);
-  background: color-mix(in srgb, var(--rs-surface) 92%, var(--rs-muted-bg, var(--rs-border)) 8%);
-}
-.rs-markdown__code-head {
-  display: flex;
-  align-items: center;
-  padding: 0.35rem 0.75rem;
-  border-bottom: 1px solid var(--rs-border);
-  font-size: var(--rs-font-size-xs);
-  color: var(--rs-muted);
-}
-.rs-markdown__pre {
-  margin: 0;
-  padding: 0.75rem 0.9rem;
-  overflow: auto;
-  font-family: var(--rs-font-mono);
-  font-size: 0.85em;
-  line-height: 1.55;
-}
-.rs-markdown__pre code {
-  padding: 0;
-  background: transparent;
-  border-radius: 0;
-  font-size: inherit;
-}
-.rs-markdown__table-wrap {
-  overflow: auto;
-}
-.rs-markdown__prose table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.95em;
-}
-.rs-markdown__prose th,
-.rs-markdown__prose td {
-  padding: 0.45em 0.7em;
-  border: 1px solid var(--rs-border);
-  text-align: left;
-}
-.rs-markdown__prose th {
-  background: color-mix(in srgb, var(--rs-muted-bg, var(--rs-border)) 40%, transparent);
-  font-weight: var(--rs-font-weight-semibold);
-}
-.rs-markdown__img {
-  max-width: 100%;
-  height: auto;
-  border-radius: var(--rs-radius);
-}
-.rs-markdown__task {
-  display: inline-block;
-  width: 0.9em;
-  height: 0.9em;
-  margin: 0 0.4em 0.05em 0;
-  border: 1px solid var(--rs-border);
-  border-radius: 0.15em;
-  vertical-align: middle;
-  background: var(--rs-surface);
-}
-.rs-markdown__task--on {
-  background: var(--rs-primary);
-  border-color: var(--rs-primary);
-  box-shadow: inset 0 0 0 0.12em var(--rs-surface);
-}
-.rs-markdown__prose li:has(> .rs-markdown__task) {
-  list-style: none;
-  margin-left: -1.15em;
-}
-</style>

package/src/components/RsMenu.vue

@@ -1,314 +0,0 @@
-<script setup lang="ts">
-import { computed, watch } from 'vue'
-import { useRsI18n } from '../composables/useRsI18n'
-import {
-  findMenuParentKeys,
-  isMenuItemGroup,
-  type RsMenuItems as RsMenuData,
-} from './menu-utils'
-import RsMenuItems from './RsMenuItems.vue'
-
-const model = defineModel<string>()
-const openKeys = defineModel<string[]>('openKeys', { default: () => [] })
-
-const props = withDefaults(
-  defineProps<{
-    items: RsMenuData
-    mode?: 'vertical' | 'horizontal'
-    collapsed?: boolean
-    /** 选中叶子时是否同时高亮祖先父级（仅字体色，无背景）；默认 false 只高亮叶子 */
-    highlightParent?: boolean
-  }>(),
-  {
-    mode: 'vertical',
-    collapsed: false,
-    highlightParent: false,
-  },
-)
-
-const emit = defineEmits<{
-  select: [key: string]
-}>()
-
-const { t } = useRsI18n()
-
-/** collapsed 仅对垂直模式生效；水平模式忽略，避免空气泡子菜单 */
-const isCollapsedVertical = computed(
-  () => props.mode === 'vertical' && props.collapsed,
-)
-
-function onSelect(key: string) {
-  model.value = key
-  emit('select', key)
-}
-
-function onToggleOpen(key: string, open: boolean) {
-  const next = new Set(openKeys.value)
-  if (open) {
-    next.add(key)
-  } else {
-    next.delete(key)
-  }
-  openKeys.value = [...next]
-}
-
-watch(
-  () => model.value,
-  (key) => {
-    if (!key) {
-      return
-    }
-    const parents = findMenuParentKeys(props.items, key)
-    if (!parents.length) {
-      return
-    }
-    const next = new Set(openKeys.value)
-    for (const parentKey of parents) {
-      next.add(parentKey)
-    }
-    openKeys.value = [...next]
-  },
-  { immediate: true },
-)
-</script>
-
-<template>
-  <nav
-    class="rs-menu"
-    :class="[`rs-menu--${mode}`, { 'rs-menu--collapsed': isCollapsedVertical }]"
-    :aria-label="t('menu.label')"
-  >
-    <ul class="rs-menu__root-list">
-      <template v-for="(entry, index) in items" :key="index">
-        <li v-if="isMenuItemGroup(entry)" class="rs-menu__group">
-          <span v-if="!isCollapsedVertical" class="rs-menu__group-label">{{ entry.label }}</span>
-          <RsMenuItems
-            :items="entry.children"
-            :active-key="model"
-            :open-keys="openKeys"
-            :collapsed="isCollapsedVertical"
-            :mode="mode"
-            :highlight-parent="highlightParent"
-            @select="onSelect"
-            @toggle-open="onToggleOpen"
-          />
-        </li>
-
-        <li v-else :key="entry.key" class="rs-menu__group rs-menu__group--plain">
-          <RsMenuItems
-            :items="[entry]"
-            :active-key="model"
-            :open-keys="openKeys"
-            :collapsed="isCollapsedVertical"
-            :mode="mode"
-            :highlight-parent="highlightParent"
-            @select="onSelect"
-            @toggle-open="onToggleOpen"
-          />
-        </li>
-      </template>
-    </ul>
-  </nav>
-</template>
-
-<style>
-.rs-menu {
-  display: block;
-}
-.rs-menu__root-list,
-.rs-menu__list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.rs-menu--horizontal > .rs-menu__root-list {
-  flex-direction: row;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-.rs-menu__group-label {
-  display: block;
-  padding: 0.5rem 0.5rem 0.25rem;
-  font-size: var(--rs-font-size-xs);
-  font-weight: var(--rs-font-weight-semibold);
-  color: var(--rs-muted);
-  letter-spacing: 0.04em;
-  line-height: var(--rs-line-height-tight);
-  user-select: none;
-}
-.rs-menu--collapsed .rs-menu__group-label {
-  display: none;
-}
-.rs-menu__group {
-  list-style: none;
-}
-.rs-menu__group--plain > .rs-menu__list {
-  margin: 0;
-}
-.rs-menu__entry {
-  list-style: none;
-}
-.rs-menu__node {
-  list-style: none;
-}
-.rs-menu--horizontal > .rs-menu__root-list > .rs-menu__group {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-}
-.rs-menu__collapsible {
-  display: block;
-}
-.rs-menu__item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-  min-height: var(--rs-menu-item-height);
-  padding: 0 0.5rem;
-  padding-left: calc(0.5rem + var(--rs-menu-depth, 0) * 0.875rem);
-  border: none;
-  border-radius: var(--rs-menu-item-radius);
-  background: transparent;
-  color: var(--rs-menu-item-fg);
-  font-size: var(--rs-menu-item-font-size);
-  text-align: left;
-  cursor: pointer;
-  transition:
-    color var(--rs-transition-fast),
-    background var(--rs-transition-fast);
-}
-.rs-menu--horizontal .rs-menu__item {
-  width: auto;
-  min-width: 0;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-.rs-menu--collapsed .rs-menu__item {
-  justify-content: center;
-  padding: 0;
-  width: var(--rs-control-height-md);
-  margin: 0 auto;
-}
-.rs-menu--collapsed .rs-menu__list--nested {
-  display: none;
-}
-.rs-menu__flyout {
-  z-index: var(--rs-z-dropdown);
-  min-width: 10rem;
-  max-width: min(16rem, 90vw);
-  padding: 0.25rem;
-  border-radius: var(--rs-radius-sm);
-  border: 1px solid var(--rs-border);
-  background: var(--rs-surface-elevated);
-  box-shadow: var(--rs-shadow);
-  outline: none;
-}
-.rs-menu__flyout-title {
-  display: block;
-  padding: 0.375rem 0.5rem 0.25rem;
-  margin-bottom: 0.125rem;
-  border-bottom: 1px solid var(--rs-border);
-  font-size: var(--rs-font-size-xs);
-  font-weight: var(--rs-font-weight-semibold);
-  color: var(--rs-muted);
-  letter-spacing: 0.04em;
-  line-height: var(--rs-line-height-tight);
-  user-select: none;
-}
-.rs-menu__flyout .rs-menu__list--nested {
-  display: flex;
-}
-.rs-menu__item:hover:not(:disabled):not(.rs-menu__item--active) {
-  color: var(--rs-menu-item-fg-hover);
-  background: var(--rs-menu-item-bg-hover);
-}
-.rs-menu__item:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
-}
-.rs-menu__item--active {
-  color: var(--rs-menu-item-active-fg);
-  background: var(--rs-menu-item-active-bg);
-  font-weight: var(--rs-menu-item-active-weight);
-}
-/* 子菜单选中时父级仅字体高亮，不加背景 */
-.rs-menu__item--active-parent {
-  color: var(--rs-menu-item-active-parent-fg);
-  background: var(--rs-menu-item-active-parent-bg);
-  font-weight: var(--rs-menu-item-active-weight);
-}
-.rs-menu__item--active-parent:hover:not(:disabled) {
-  color: var(--rs-menu-item-active-parent-fg);
-  background: var(--rs-menu-item-bg-hover);
-}
-.rs-menu__item:disabled {
-  opacity: 0.38;
-  cursor: not-allowed;
-}
-/** 固定图标列宽：有/无图标时文案起点一致，嵌套缩进再叠在左侧 padding 上 */
-.rs-menu__icon-slot {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: 1rem;
-  height: 1rem;
-}
-.rs-menu__icon {
-  display: block;
-}
-.rs-menu__label {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.rs-menu__submenu-arrow {
-  flex-shrink: 0;
-  color: var(--rs-muted);
-  transition: transform var(--rs-transition-fast);
-}
-.rs-menu__item--submenu-trigger[data-state='open'] .rs-menu__submenu-arrow {
-  transform: rotate(180deg);
-}
-.rs-menu__submenu {
-  overflow: hidden;
-}
-.rs-menu__list--nested {
-  margin-top: 0.125rem;
-}
-.rs-menu--horizontal > .rs-menu__root-list > .rs-menu__group > .rs-menu__group-label {
-  display: none;
-}
-.rs-menu--horizontal > .rs-menu__root-list > .rs-menu__group > .rs-menu__list {
-  margin-top: 0;
-  flex-direction: row;
-  align-items: center;
-  gap: 0.25rem;
-}
-.rs-menu--horizontal .rs-menu__entry--submenu .rs-menu__submenu {
-  position: absolute;
-  top: calc(100% + 0.25rem);
-  left: 0;
-  z-index: var(--rs-z-dropdown);
-  min-width: 10rem;
-  padding: 0.25rem;
-  border-radius: var(--rs-radius-sm);
-  border: 1px solid var(--rs-border);
-  background: var(--rs-surface-elevated);
-  box-shadow: var(--rs-shadow);
-}
-.rs-menu--horizontal .rs-menu__entry--submenu .rs-menu__list--nested {
-  flex-direction: column;
-  align-items: stretch;
-  flex-wrap: nowrap;
-  margin-top: 0;
-}
-</style>