@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/markdown/Markdown.vue

@@ -1,295 +1,295 @@
-<script lang="ts">
-import type { Options as DeepMergeOptions } from 'deepmerge'
-import type { Element, Root, RootContent } from 'hast'
-import type { Options } from 'rehype-sanitize'
-import type { PropType, VNodeArrayChildren } from 'vue'
-import deepmerge from 'deepmerge'
-import { selectAll } from 'hast-util-select'
-import { find, html } from 'property-information'
-import rehypeRaw from 'rehype-raw'
-import rehypeSanitize, { defaultSchema } from 'rehype-sanitize'
-import remarkParse from 'remark-parse'
-import remarkRehype from 'remark-rehype'
-import { unified } from 'unified'
-import { defineComponent, h } from 'vue'
-
-interface Context {
-  listDepth: number
-  listOrdered: boolean
-  listItemIndex: number
-  currentContext?: string
-}
-type Attributes = Record<string, any>
-type CustomAttrsValue = Record<string, any>
-type CustomAttrsFunctionValue = (node: Element, combinedAttrs: Attributes) => Record<string, CustomAttrsValue>
-export type CustomAttrs = Record<string, CustomAttrsValue | CustomAttrsFunctionValue>
-type AliasList = string[]
-
-export interface SanitizeOptions {
-  sanitizeOptions?: Options
-  mergeOptions?: DeepMergeOptions
-}
-
-export default defineComponent({
-  name: 'UiMarkdown',
-  props: {
-    markdown: {
-      type: String,
-      default: '',
-    },
-    customAttrs: {
-      type: Object as PropType<CustomAttrs>,
-      default: () => ({}),
-    },
-    remarkPlugins: {
-      type: Array as PropType<any[]>,
-      default: () => [],
-    },
-    rehypePlugins: {
-      type: Array as PropType<any[]>,
-      default: () => [],
-    },
-    sanitize: {
-      type: Boolean,
-      default: false,
-    },
-    sanitizeOptions: {
-      type: Object as PropType<SanitizeOptions>,
-      default: () => ({}),
-    },
-    iframeSandbox: {
-      type: String,
-      default: '',
-    },
-  },
-  setup(props, { slots, attrs }) {
-    const processor = unified()
-      .use(remarkParse)
-      .use(props.remarkPlugins)
-      .use(remarkRehype, { allowDangerousHtml: true })
-      .use(rehypeRaw)
-      .use(props.rehypePlugins)
-      .use(
-        props.sanitize
-          ? [
-              [
-                rehypeSanitize,
-                deepmerge(
-                  defaultSchema,
-                  props.sanitizeOptions.sanitizeOptions || {},
-                  props.sanitizeOptions.mergeOptions || {},
-                ),
-              ],
-            ]
-          : [],
-      )
-
-    const computeCustomAttrs = (node: Element, aliasList: AliasList, combinedAttrs: Attributes) => {
-      for (let i = aliasList.length - 1; i >= 0; i--) {
-        const name = aliasList[i]
-        if (name in props.customAttrs) {
-          const customAttrs = props.customAttrs[name]
-
-          return typeof customAttrs === 'function' ? customAttrs(node, combinedAttrs) : customAttrs
-        }
-      }
-      return {}
-    }
-
-    const parseChildren = (nodeList: RootContent[], context: Context, parent: Element | Root): VNodeArrayChildren => {
-      const keyCounter: {
-        [key: string]: number
-      } = {}
-
-      return nodeList.map((node) => {
-        const aliasList: AliasList = []
-        let attrs = {}
-        const props: Attributes = {}
-        const thisContext = { ...context }
-
-        switch (node.type) {
-          case 'text':
-            return [node.value]
-
-          case 'element': {
-            aliasList.push(node.tagName)
-            keyCounter[node.tagName] = node.tagName in keyCounter ? keyCounter[node.tagName] + 1 : 0
-            props.key = `${node.tagName}-${keyCounter[node.tagName]}`
-            node.properties = node.properties || {}
-
-            attrs = Object.entries(node.properties).reduce<Attributes>((acc, [hastKey, value]) => {
-              const attrInfo = find(html, hastKey)
-              acc[attrInfo.attribute] = value
-
-              return acc
-            }, {})
-
-            switch (node.tagName) {
-              case 'h1':
-              case 'h2':
-              case 'h3':
-              case 'h4':
-              case 'h5':
-              case 'h6':
-                props.level = Number.parseFloat(node.tagName.slice(1))
-                aliasList.push('heading')
-                break
-
-              case 'code':
-                props.languageOriginal = Array.isArray(props.class)
-                  ? props.class.find(cls => cls.startsWith('language-'))
-                  : ''
-                props.language = props.languageOriginal ? props.languageOriginal.replace('language-', '') : ''
-                props.inline = 'tagName' in parent && parent.tagName !== 'pre'
-                aliasList.push(props.inline ? 'inline-code' : 'block-code')
-                break
-
-              case 'thead':
-              case 'tbody':
-                thisContext.currentContext = node.tagName
-                break
-
-              case 'td':
-              case 'th':
-              case 'tr':
-                props.isHead = context.currentContext === 'thead'
-                break
-
-              case 'ul':
-              case 'ol':
-                thisContext.listDepth = context.listDepth + 1
-                thisContext.listOrdered = node.tagName === 'ol'
-                thisContext.listItemIndex = -1
-                props.ordered = thisContext.listOrdered
-                props.depth = thisContext.listDepth
-                aliasList.push('list')
-                break
-
-              case 'li':
-                thisContext.listItemIndex++
-                props.ordered = thisContext.listOrdered
-                props.depth = thisContext.listDepth
-                props.index = thisContext.listItemIndex
-                aliasList.push('list-item')
-                break
-
-              case 'slot':
-                if (typeof node.properties.name === 'string') {
-                  aliasList.push(node.properties.name)
-                  delete node.properties.name
-                }
-                break
-
-              case 'br': {
-                node.tagName = 'div'
-                attrs = { class: 'ui-br' }
-                break
-              }
-
-              default:
-                break
-            }
-            break
-          }
-
-          default:
-            return null
-        }
-
-        attrs = {
-          ...attrs,
-          ...computeCustomAttrs(node, aliasList, { ...attrs, ...props }),
-        }
-
-        for (let i = aliasList.length - 1; i >= 0; i--) {
-          const targetSlot = slots[aliasList[i]]
-          const targetSlotRender = typeof targetSlot === 'function' ? targetSlot : null
-          if (targetSlotRender) {
-            return targetSlotRender({
-              ...attrs,
-              ...props,
-              children: () => parseChildren(node.children, thisContext, node),
-            })
-          }
-        }
-
-        return h(node.tagName, attrs, parseChildren(node.children, thisContext, node))
-      })
-    }
-
-    const processMarkdownContent = (content: string) => {
-      const mdast = processor.parse(content)
-      const hast = processor.runSync(mdast) as Root
-      const slots = (selectAll('slot[id]', hast) as Element[]).reverse()
-      const slotsGrouped = slots.reduce((acc, slot) => {
-        const id = slot.properties.id as string
-        if (!acc[id])
-          acc[id] = []
-        acc[id].push(slot)
-        return acc
-      }, {} as Record<string, Element[]>)
-
-      let processedContent = content
-      const slotsToRemove = Object.values(slotsGrouped)
-        .map(slots => slots.slice(1))
-        .flat()
-
-      for (const slot of slotsToRemove) {
-        if (slot.position?.start?.offset != null && slot.position?.end?.offset != null) {
-          processedContent = processedContent.slice(0, slot.position.start.offset)
-          + processedContent.slice(slot.position.end.offset)
-        }
-      }
-
-      const finalHast = processor.runSync(processor.parse(processedContent)) as Root
-      return h(
-        'div',
-        attrs,
-        parseChildren(finalHast.children, { listDepth: -1, listOrdered: false, listItemIndex: -1 }, finalHast),
-      )
-    }
-
-    return () => {
-      const markdown = props.markdown
-
-      // Extract HTML content if exists and get its position
-      const htmlMatch = markdown.match(/<!DOCTYPE html>[\s\S]*?<\/html>/i)
-      const elements: VNodeArrayChildren = []
-
-      if (htmlMatch) {
-        const htmlContent = htmlMatch[0]
-        const htmlStartIndex = htmlMatch.index!
-        const htmlEndIndex = htmlStartIndex + htmlContent.length
-
-        // Process markdown content before HTML
-        const beforeHtml = markdown.slice(0, htmlStartIndex).trim()
-        if (beforeHtml) {
-          elements.push(processMarkdownContent(beforeHtml))
-        }
-
-        // Add iframe for HTML content
-        elements.push(
-          h('iframe', {
-            srcDoc: htmlContent,
-            style: 'width: 100%; border: none; min-height: 500px;',
-            sandbox: props.iframeSandbox,
-            class: attrs.class,
-          }),
-        )
-
-        // Process markdown content after HTML
-        const afterHtml = markdown.slice(htmlEndIndex).trim()
-        if (afterHtml) {
-          elements.push(processMarkdownContent(afterHtml))
-        }
-      }
-      else {
-        // If no HTML content, process entire markdown
-        elements.push(processMarkdownContent(markdown))
-      }
-
-      return elements
-    }
-  },
-})
-</script>
+<script lang="ts">
+import type { Options as DeepMergeOptions } from 'deepmerge'
+import type { Element, Root, RootContent } from 'hast'
+import type { Options } from 'rehype-sanitize'
+import type { PropType, VNodeArrayChildren } from 'vue'
+import deepmerge from 'deepmerge'
+import { selectAll } from 'hast-util-select'
+import { find, html } from 'property-information'
+import rehypeRaw from 'rehype-raw'
+import rehypeSanitize, { defaultSchema } from 'rehype-sanitize'
+import remarkParse from 'remark-parse'
+import remarkRehype from 'remark-rehype'
+import { unified } from 'unified'
+import { defineComponent, h } from 'vue'
+
+interface Context {
+  listDepth: number
+  listOrdered: boolean
+  listItemIndex: number
+  currentContext?: string
+}
+type Attributes = Record<string, any>
+type CustomAttrsValue = Record<string, any>
+type CustomAttrsFunctionValue = (node: Element, combinedAttrs: Attributes) => Record<string, CustomAttrsValue>
+export type CustomAttrs = Record<string, CustomAttrsValue | CustomAttrsFunctionValue>
+type AliasList = string[]
+
+export interface SanitizeOptions {
+  sanitizeOptions?: Options
+  mergeOptions?: DeepMergeOptions
+}
+
+export default defineComponent({
+  name: 'UiMarkdown',
+  props: {
+    markdown: {
+      type: String,
+      default: '',
+    },
+    customAttrs: {
+      type: Object as PropType<CustomAttrs>,
+      default: () => ({}),
+    },
+    remarkPlugins: {
+      type: Array as PropType<any[]>,
+      default: () => [],
+    },
+    rehypePlugins: {
+      type: Array as PropType<any[]>,
+      default: () => [],
+    },
+    sanitize: {
+      type: Boolean,
+      default: false,
+    },
+    sanitizeOptions: {
+      type: Object as PropType<SanitizeOptions>,
+      default: () => ({}),
+    },
+    iframeSandbox: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props, { slots, attrs }) {
+    const processor = unified()
+      .use(remarkParse)
+      .use(props.remarkPlugins)
+      .use(remarkRehype, { allowDangerousHtml: true })
+      .use(rehypeRaw)
+      .use(props.rehypePlugins)
+      .use(
+        props.sanitize
+          ? [
+              [
+                rehypeSanitize,
+                deepmerge(
+                  defaultSchema,
+                  props.sanitizeOptions.sanitizeOptions || {},
+                  props.sanitizeOptions.mergeOptions || {},
+                ),
+              ],
+            ]
+          : [],
+      )
+
+    const computeCustomAttrs = (node: Element, aliasList: AliasList, combinedAttrs: Attributes) => {
+      for (let i = aliasList.length - 1; i >= 0; i--) {
+        const name = aliasList[i]
+        if (name in props.customAttrs) {
+          const customAttrs = props.customAttrs[name]
+
+          return typeof customAttrs === 'function' ? customAttrs(node, combinedAttrs) : customAttrs
+        }
+      }
+      return {}
+    }
+
+    const parseChildren = (nodeList: RootContent[], context: Context, parent: Element | Root): VNodeArrayChildren => {
+      const keyCounter: {
+        [key: string]: number
+      } = {}
+
+      return nodeList.map((node) => {
+        const aliasList: AliasList = []
+        let attrs = {}
+        const props: Attributes = {}
+        const thisContext = { ...context }
+
+        switch (node.type) {
+          case 'text':
+            return [node.value]
+
+          case 'element': {
+            aliasList.push(node.tagName)
+            keyCounter[node.tagName] = node.tagName in keyCounter ? keyCounter[node.tagName] + 1 : 0
+            props.key = `${node.tagName}-${keyCounter[node.tagName]}`
+            node.properties = node.properties || {}
+
+            attrs = Object.entries(node.properties).reduce<Attributes>((acc, [hastKey, value]) => {
+              const attrInfo = find(html, hastKey)
+              acc[attrInfo.attribute] = value
+
+              return acc
+            }, {})
+
+            switch (node.tagName) {
+              case 'h1':
+              case 'h2':
+              case 'h3':
+              case 'h4':
+              case 'h5':
+              case 'h6':
+                props.level = Number.parseFloat(node.tagName.slice(1))
+                aliasList.push('heading')
+                break
+
+              case 'code':
+                props.languageOriginal = Array.isArray(props.class)
+                  ? props.class.find(cls => cls.startsWith('language-'))
+                  : ''
+                props.language = props.languageOriginal ? props.languageOriginal.replace('language-', '') : ''
+                props.inline = 'tagName' in parent && parent.tagName !== 'pre'
+                aliasList.push(props.inline ? 'inline-code' : 'block-code')
+                break
+
+              case 'thead':
+              case 'tbody':
+                thisContext.currentContext = node.tagName
+                break
+
+              case 'td':
+              case 'th':
+              case 'tr':
+                props.isHead = context.currentContext === 'thead'
+                break
+
+              case 'ul':
+              case 'ol':
+                thisContext.listDepth = context.listDepth + 1
+                thisContext.listOrdered = node.tagName === 'ol'
+                thisContext.listItemIndex = -1
+                props.ordered = thisContext.listOrdered
+                props.depth = thisContext.listDepth
+                aliasList.push('list')
+                break
+
+              case 'li':
+                thisContext.listItemIndex++
+                props.ordered = thisContext.listOrdered
+                props.depth = thisContext.listDepth
+                props.index = thisContext.listItemIndex
+                aliasList.push('list-item')
+                break
+
+              case 'slot':
+                if (typeof node.properties.name === 'string') {
+                  aliasList.push(node.properties.name)
+                  delete node.properties.name
+                }
+                break
+
+              case 'br': {
+                node.tagName = 'div'
+                attrs = { class: 'ui-br' }
+                break
+              }
+
+              default:
+                break
+            }
+            break
+          }
+
+          default:
+            return null
+        }
+
+        attrs = {
+          ...attrs,
+          ...computeCustomAttrs(node, aliasList, { ...attrs, ...props }),
+        }
+
+        for (let i = aliasList.length - 1; i >= 0; i--) {
+          const targetSlot = slots[aliasList[i]]
+          const targetSlotRender = typeof targetSlot === 'function' ? targetSlot : null
+          if (targetSlotRender) {
+            return targetSlotRender({
+              ...attrs,
+              ...props,
+              children: () => parseChildren(node.children, thisContext, node),
+            })
+          }
+        }
+
+        return h(node.tagName, attrs, parseChildren(node.children, thisContext, node))
+      })
+    }
+
+    const processMarkdownContent = (content: string) => {
+      const mdast = processor.parse(content)
+      const hast = processor.runSync(mdast) as Root
+      const slots = (selectAll('slot[id]', hast) as Element[]).reverse()
+      const slotsGrouped = slots.reduce((acc, slot) => {
+        const id = slot.properties.id as string
+        if (!acc[id])
+          acc[id] = []
+        acc[id].push(slot)
+        return acc
+      }, {} as Record<string, Element[]>)
+
+      let processedContent = content
+      const slotsToRemove = Object.values(slotsGrouped)
+        .map(slots => slots.slice(1))
+        .flat()
+
+      for (const slot of slotsToRemove) {
+        if (slot.position?.start?.offset != null && slot.position?.end?.offset != null) {
+          processedContent = processedContent.slice(0, slot.position.start.offset)
+          + processedContent.slice(slot.position.end.offset)
+        }
+      }
+
+      const finalHast = processor.runSync(processor.parse(processedContent)) as Root
+      return h(
+        'div',
+        attrs,
+        parseChildren(finalHast.children, { listDepth: -1, listOrdered: false, listItemIndex: -1 }, finalHast),
+      )
+    }
+
+    return () => {
+      const markdown = props.markdown
+
+      // Extract HTML content if exists and get its position
+      const htmlMatch = markdown.match(/<!DOCTYPE html>[\s\S]*?<\/html>/i)
+      const elements: VNodeArrayChildren = []
+
+      if (htmlMatch) {
+        const htmlContent = htmlMatch[0]
+        const htmlStartIndex = htmlMatch.index!
+        const htmlEndIndex = htmlStartIndex + htmlContent.length
+
+        // Process markdown content before HTML
+        const beforeHtml = markdown.slice(0, htmlStartIndex).trim()
+        if (beforeHtml) {
+          elements.push(processMarkdownContent(beforeHtml))
+        }
+
+        // Add iframe for HTML content
+        elements.push(
+          h('iframe', {
+            srcDoc: htmlContent,
+            style: 'width: 100%; border: none; min-height: 500px;',
+            sandbox: props.iframeSandbox,
+            class: attrs.class,
+          }),
+        )
+
+        // Process markdown content after HTML
+        const afterHtml = markdown.slice(htmlEndIndex).trim()
+        if (afterHtml) {
+          elements.push(processMarkdownContent(afterHtml))
+        }
+      }
+      else {
+        // If no HTML content, process entire markdown
+        elements.push(processMarkdownContent(markdown))
+      }
+
+      return elements
+    }
+  },
+})
+</script>

package/src/components/tabs/Tabs.vue

@@ -1,15 +1,15 @@
-<script setup lang="ts">
-import type { TabsRootEmits, TabsRootProps } from 'radix-vue'
-import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
-
-const props = defineProps<TabsRootProps>()
-const emits = defineEmits<TabsRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <TabsRoot v-bind="forwarded">
-    <slot />
-  </TabsRoot>
-</template>
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from 'radix-vue'
+import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<TabsRootProps>()
+const emits = defineEmits<TabsRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TabsRoot v-bind="forwarded">
+    <slot />
+  </TabsRoot>
+</template>

package/src/components/tabs/TabsContent.vue

@@ -1,22 +1,22 @@
-<script setup lang="ts">
-import { TabsContent, type TabsContentProps } from 'radix-vue'
-import { type HTMLAttributes, computed } from 'vue'
-
-const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <TabsContent
-    class="mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring"
-    :class="[props.class]"
-    v-bind="delegatedProps"
-  >
-    <slot />
-  </TabsContent>
-</template>
+<script setup lang="ts">
+import { TabsContent, type TabsContentProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsContent
+    class="mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring"
+    :class="[props.class]"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>