@globalbrain/sefirot 4.26.0 → 4.28.0

package/lib/components/SActionMenu.vue

@@ -7,7 +7,7 @@ import SDropdown from './SDropdown.vue'
 
 export type { Mode, Size, Tooltip, Type }
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   tag?: Component | string
   size?: Size
   type?: Type
@@ -23,8 +23,11 @@ const props = defineProps<{
   loading?: boolean
   disabled?: boolean
   tooltip?: string | Tooltip
+  dropdownAlign?: 'left' | 'right'
   options: DropdownSection[]
-}>()
+}>(), {
+  dropdownAlign: 'left'
+})
 
 const container = ref<any>(null)
 
@@ -40,7 +43,7 @@ async function onOpen() {
 </script>
 
 <template>
-  <div class="SActionMenu" :class="[block]" ref="container">
+  <div class="SActionMenu" :class="[{ block }, dropdownAlign]" ref="container">
     <div class="button">
       <SButton
         :tag
@@ -75,7 +78,6 @@ async function onOpen() {
 
 .dropdown {
   position: absolute;
-  left: 0;
   z-index: var(--z-index-dropdown);
 
   &.top    { bottom: calc(100% + 8px); }
@@ -85,4 +87,7 @@ async function onOpen() {
 .SActionMenu.block {
   display: block;
 }
+
+.SActionMenu.left .dropdown  { left: 0; }
+.SActionMenu.right .dropdown { right: 0; }
 </style>

package/lib/components/SContent.vue

@@ -104,6 +104,7 @@
 }
 
 .SContent :deep(ol > li::before) {
+  position: absolute;
   margin-right: 3px;
   margin-left: -20px;
   color: var(--c-text-1);

package/lib/components/SMarkdown.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import { type Component, computed } from 'vue'
-import { useMarkdown } from '../composables/Markdown'
+import { type UseMarkdownOptions, useMarkdown } from '../composables/Markdown'
 
-const props = withDefaults(defineProps<{
+export interface SMarkdownProps extends UseMarkdownOptions {
   tag?: Component | string
   content: string
-  html?: boolean
-  inline?: boolean
-}>(), {
+}
+
+const props = withDefaults(defineProps<SMarkdownProps>(), {
   tag: 'div',
   html: true
 })
 
-const markdown = useMarkdown({ html: props.html, inline: props.inline })
+const markdown = useMarkdown(props)
 const rendered = computed(() => markdown(props.content))
 </script>
 

package/lib/composables/Markdown.ts

@@ -1,8 +1,71 @@
 import DOMPurify, { type Config } from 'dompurify'
-import MarkdownIt, { type Options as MarkdownItOptions } from 'markdown-it'
+import MarkdownIt from 'markdown-it'
 
 export type UseMarkdown = (source: string, inline?: boolean) => string
 
+// vendored for vue compatibility
+export interface MarkdownItOptions {
+  /**
+   * Set `true` to enable HTML tags in source. Be careful!
+   * That's not safe! You may need external sanitizer to protect output from XSS.
+   * It's better to extend features via plugins, instead of enabling HTML.
+   * @default false
+   */
+  html?: boolean | undefined
+
+  /**
+   * Set `true` to add '/' when closing single tags
+   * (`<br />`). This is needed only for full CommonMark compatibility. In real
+   * world you will need HTML output.
+   * @default false
+   */
+  xhtmlOut?: boolean | undefined
+
+  /**
+   * Set `true` to convert `\n` in paragraphs into `<br>`.
+   * @default false
+   */
+  breaks?: boolean | undefined
+
+  /**
+   * CSS language class prefix for fenced blocks.
+   * Can be useful for external highlighters.
+   * @default 'language-'
+   */
+  langPrefix?: string | undefined
+
+  /**
+   * Set `true` to autoconvert URL-like text to links.
+   * @default false
+   */
+  linkify?: boolean | undefined
+
+  /**
+   * Set `true` to enable [some language-neutral replacement](https://github.com/markdown-it/markdown-it/blob/master/lib/rules_core/replacements.js) +
+   * quotes beautification (smartquotes).
+   * @default false
+   */
+  typographer?: boolean | undefined
+
+  /**
+   * Double + single quotes replacement
+   * pairs, when typographer enabled and smartquotes on. For example, you can
+   * use `'«»„“'` for Russian, `'„“‚‘'` for German, and
+   * `['«\xA0', '\xA0»', '‹\xA0', '\xA0›']` for French (including nbsp).
+   * @default '“”‘’'
+   */
+  quotes?: string | string[]
+
+  /**
+   * Highlighter function for fenced code blocks.
+   * Highlighter `function (str, lang, attrs)` should return escaped HTML. It can
+   * also return empty string if the source was not changed and should be escaped
+   * externally. If result starts with <pre... internal wrapper is skipped.
+   * @default null
+   */
+  highlight?: ((str: string, lang: string, attrs: string) => string) | null | undefined
+}
+
 export interface UseMarkdownOptions extends MarkdownItOptions {
   config?: (md: MarkdownIt) => void
   /** @default false */
@@ -40,6 +103,16 @@ export function useMarkdown({
   //
 
   const md = new MarkdownIt({ html: true, linkify: true, ...options })
+
+  md.renderer.rules.ordered_list_open = (tokens, idx, options, env, self) => {
+    const token = tokens[idx]
+    const start = Number(token.attrGet('start')) - 1
+    if (start >= 0) {
+      token.attrSet('style', `counter-reset: s-medium-counter ${start}`)
+    }
+    return self.renderToken(tokens, idx, options)
+  }
+
   config?.(md)
 
   return (source, inline = _inline) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
   "type": "module",
-  "version": "4.26.0",
+  "version": "4.28.0",
   "packageManager": "pnpm@9.15.4",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",