@pgcorp/ui-kit 0.8.1 → 0.10.0

package/src/components/shared/data-display/_internal/SRichBlockNode.css

@@ -0,0 +1,85 @@
+@reference "../../../../styles/reference.css";
+
+.s-rich-document__paragraph {
+  min-width: 0;
+  margin: 0;
+}
+
+.s-rich-document__heading {
+  @apply font-semibold text-surface-950 dark:text-surface-50;
+  min-width: 0;
+  margin: 0;
+  line-height: 1.25;
+}
+
+h1.s-rich-document__heading { @apply text-3xl; }
+h2.s-rich-document__heading { @apply text-2xl; }
+h3.s-rich-document__heading { @apply text-xl; }
+h4.s-rich-document__heading { @apply text-lg; }
+h5.s-rich-document__heading,
+h6.s-rich-document__heading { @apply text-base; }
+
+.s-rich-document__list {
+  display: grid;
+  gap: var(--s-space-content-gap);
+  margin: 0;
+  padding-inline-start: 1.5rem;
+}
+
+ul.s-rich-document__list { list-style: disc; }
+ol.s-rich-document__list { list-style: decimal; }
+
+.s-rich-document__quote {
+  @apply border-l-4 border-primary-300 text-surface-600 dark:border-primary-700 dark:text-surface-300;
+  display: grid;
+  gap: var(--s-space-content-gap);
+  margin: 0;
+  padding-inline-start: var(--s-space-section-gap);
+}
+
+.s-rich-document__divider {
+  @apply border-0 border-t border-surface-200 dark:border-surface-700;
+  width: 100%;
+  margin: 0;
+}
+
+.s-rich-document__figure {
+  display: grid;
+  gap: var(--s-space-content-gap);
+  min-width: 0;
+  margin: 0;
+}
+
+.s-rich-document__image {
+  @apply rounded-lg border border-surface-200 bg-surface-50 dark:border-surface-700 dark:bg-surface-900;
+  display: block;
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  margin-inline: auto;
+}
+
+.s-rich-document__caption,
+.s-rich-document__resource-description {
+  @apply text-sm text-surface-500 dark:text-surface-400;
+}
+
+.s-rich-document__caption {
+  text-align: center;
+}
+
+.s-rich-document__resource {
+  @apply flex min-w-0 flex-wrap items-center;
+  gap: var(--s-space-content-gap);
+}
+
+.s-rich-document__callout-content {
+  display: grid;
+  gap: var(--s-space-content-gap);
+  min-width: 0;
+}
+
+.s-rich-document__actions {
+  @apply flex min-w-0 flex-wrap items-center;
+  gap: var(--s-space-content-gap);
+}

package/src/components/shared/data-display/_internal/SRichBlockNode.vue

@@ -0,0 +1,282 @@
+<template>
+  <p v-if="node.type === 'paragraph'" class="s-rich-document__paragraph">
+    <SRichInlineNode
+      v-for="(child, index) in node.children"
+      :key="index"
+      :node="child"
+      :document-id="documentId"
+      :path="`${path}.children[${index}]`"
+      @link-activate="emit('link-activate', $event)"
+    />
+  </p>
+  <component :is="`h${node.level}`" v-else-if="node.type === 'heading'" class="s-rich-document__heading">
+    <SRichInlineNode
+      v-for="(child, index) in node.children"
+      :key="index"
+      :node="child"
+      :document-id="documentId"
+      :path="`${path}.children[${index}]`"
+      @link-activate="emit('link-activate', $event)"
+    />
+  </component>
+  <component
+    :is="node.ordered ? 'ol' : 'ul'"
+    v-else-if="node.type === 'list'"
+    class="s-rich-document__list"
+    :start="node.ordered ? node.start : undefined"
+  >
+    <li v-for="(item, itemIndex) in node.children" :key="itemIndex">
+      <SRichBlockNode
+        v-for="(child, childIndex) in item.children"
+        :key="childIndex"
+        :node="child"
+        :resources="resources"
+        :document-id="documentId"
+        :path="`${path}.children[${itemIndex}].children[${childIndex}]`"
+        @link-activate="emit('link-activate', $event)"
+        @resource-activate="emit('resource-activate', $event)"
+        @action="emit('action', $event)"
+      />
+    </li>
+  </component>
+  <blockquote v-else-if="node.type === 'quote'" class="s-rich-document__quote">
+    <SRichBlockNode
+      v-for="(child, index) in node.children"
+      :key="index"
+      :node="child"
+      :resources="resources"
+      :document-id="documentId"
+      :path="`${path}.children[${index}]`"
+      @link-activate="emit('link-activate', $event)"
+      @resource-activate="emit('resource-activate', $event)"
+      @action="emit('action', $event)"
+    />
+  </blockquote>
+  <hr v-else-if="node.type === 'divider'" class="s-rich-document__divider" />
+  <figure v-else-if="node.type === 'image'" class="s-rich-document__figure">
+    <img
+      class="s-rich-document__image"
+      :src="imageResource(node.resourceId).url"
+      :alt="imageResource(node.resourceId).alt"
+      :title="imageResource(node.resourceId).title"
+      loading="lazy"
+      decoding="async"
+    />
+    <figcaption v-if="node.caption" class="s-rich-document__caption">
+      <SRichInlineNode
+        v-for="(child, index) in node.caption"
+        :key="index"
+        :node="child"
+        :document-id="documentId"
+        :path="`${path}.caption[${index}]`"
+        @link-activate="emit('link-activate', $event)"
+      />
+    </figcaption>
+  </figure>
+  <div v-else-if="node.type === 'resource'" class="s-rich-document__resource">
+    <SButton
+      :label="node.label"
+      severity="secondary"
+      appearance="soft"
+      size="sm"
+      @click="activateResource(node.resourceId)"
+    />
+    <span v-if="node.description" class="s-rich-document__resource-description">{{ node.description }}</span>
+  </div>
+  <AsyncSCodeBlock
+    v-else-if="node.type === 'codeBlock'"
+    :code="node.code"
+    :language="{ mode: 'explicit', id: node.language ?? 'text' }"
+    presentation="highlighted"
+    :show-header="node.language !== undefined || node.label !== undefined"
+    :show-line-numbers="node.showLineNumbers ?? true"
+    read-only
+    viewport="document"
+    :aria-label="node.label ?? t('editor.codeBlock')"
+  />
+  <AsyncSRichMath
+    v-else-if="node.type === 'mathBlock'"
+    :source="node.source"
+    :label="node.label"
+    display="block"
+  />
+  <STable
+    v-else-if="node.type === 'table'"
+    :columns="tableColumns"
+    :data="node.rows"
+    :get-row-key="rowKey"
+    :aria-label="node.label"
+    surface="plain"
+    density="compact"
+    min-width="content"
+  >
+    <template #cell="{ row, column }">
+      <SRichInlineNode
+        v-for="(child, index) in tableCell(row, column.field).children"
+        :key="index"
+        :node="child"
+        :document-id="documentId"
+        :path="`${path}.rows[${tableRowIndex(row)}].cells[${tableColumnIndex(column.field)}].children[${index}]`"
+        @link-activate="emit('link-activate', $event)"
+      />
+    </template>
+  </STable>
+  <SPanel
+    v-else-if="node.type === 'callout' && node.tone === 'neutral'"
+    :title="node.title"
+    :heading-level="3"
+    surface-tone="subtle"
+    content-layout="stack"
+    content-gap="content"
+  >
+    <SRichBlockNode
+      v-for="(child, index) in node.children"
+      :key="index"
+      :node="child"
+      :resources="resources"
+      :document-id="documentId"
+      :path="`${path}.children[${index}]`"
+      @link-activate="emit('link-activate', $event)"
+      @resource-activate="emit('resource-activate', $event)"
+      @action="emit('action', $event)"
+    />
+  </SPanel>
+  <SMessage
+    v-else-if="node.type === 'callout'"
+    :severity="calloutSeverity(node.tone)"
+    :title="node.title"
+    live="off"
+  >
+    <div class="s-rich-document__callout-content">
+      <SRichBlockNode
+        v-for="(child, index) in node.children"
+        :key="index"
+        :node="child"
+        :resources="resources"
+        :document-id="documentId"
+        :path="`${path}.children[${index}]`"
+        @link-activate="emit('link-activate', $event)"
+        @resource-activate="emit('resource-activate', $event)"
+        @action="emit('action', $event)"
+      />
+    </div>
+  </SMessage>
+  <div v-else-if="node.type === 'actionGroup'" class="s-rich-document__actions" role="group" :aria-label="node.label">
+    <SButton
+      v-for="action in node.actions"
+      :key="action.id"
+      :label="action.label"
+      :severity="actionSeverity(action.appearance)"
+      :appearance="action.appearance === 'primary' ? 'solid' : 'soft'"
+      :disabled="action.disabled"
+      size="sm"
+      @click="activateAction(action.id)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineAsyncComponent } from 'vue'
+
+import { useUiKitLocale } from '../../../../composables/useUiKitLocale'
+import SPanel from '../../containers/SPanel.vue'
+import SButton, { type SButtonSeverity } from '../../controls/SButton.vue'
+import SMessage, { type Severity as SMessageSeverity } from '../SMessage.vue'
+import STable from '../STable.vue'
+import type { STableColumn } from '../table'
+import type {
+  SRichActionAppearance,
+  SRichBlockNode,
+  SRichCalloutTone,
+  SRichDocumentActionIntent,
+  SRichDocumentImageResource,
+  SRichDocumentLinkActivate,
+  SRichDocumentResource,
+  SRichDocumentResourceActivate,
+  SRichTableCell,
+  SRichTableRow,
+} from '../richDocument'
+import SRichInlineNode from './SRichInlineNode.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  node: SRichBlockNode
+  resources: readonly SRichDocumentResource[]
+  documentId: string
+  path: string
+}>()
+
+const emit = defineEmits<{
+  'link-activate': [payload: SRichDocumentLinkActivate]
+  'resource-activate': [payload: SRichDocumentResourceActivate]
+  action: [payload: SRichDocumentActionIntent]
+}>()
+
+const { t } = useUiKitLocale()
+const AsyncSCodeBlock = defineAsyncComponent(() => import('../SCodeBlock.vue'))
+const AsyncSRichMath = defineAsyncComponent(() => import('./SRichMath.vue'))
+const tableColumns = computed<readonly STableColumn<SRichTableRow, string>[]>(() => {
+  if (props.node.type !== 'table') return []
+  return Object.freeze(props.node.columns.map((column, index) => Object.freeze({
+    field: column.id,
+    header: column.header,
+    headerPresentation: column.headerPresentation,
+    align: column.align,
+    content: 'value' as const,
+    value: (row: SRichTableRow) => row.cells[index],
+  })))
+})
+
+function rowKey(row: SRichTableRow): string {
+  return row.id
+}
+
+function tableColumnIndex(field: string): number {
+  if (props.node.type !== 'table') throw new Error('SRichBlockNode: table column outside table node.')
+  const index = props.node.columns.findIndex((column) => column.id === field)
+  if (index < 0) throw new Error(`SRichBlockNode: unknown table column ${JSON.stringify(field)}.`)
+  return index
+}
+
+function tableRowIndex(row: SRichTableRow): number {
+  if (props.node.type !== 'table') throw new Error('SRichBlockNode: table row outside table node.')
+  const index = props.node.rows.findIndex((candidate) => candidate.id === row.id)
+  if (index < 0) throw new Error(`SRichBlockNode: unknown table row ${JSON.stringify(row.id)}.`)
+  return index
+}
+
+function tableCell(row: SRichTableRow, field: string): SRichTableCell {
+  const cell = row.cells[tableColumnIndex(field)]
+  if (!cell) throw new Error(`SRichBlockNode: missing table cell for ${JSON.stringify(field)}.`)
+  return cell
+}
+
+function imageResource(id: string): SRichDocumentImageResource {
+  const resource = props.resources.find((candidate) => candidate.id === id)
+  if (resource?.kind !== 'image') throw new Error(`SRichBlockNode: image resource ${JSON.stringify(id)} is unavailable.`)
+  return resource
+}
+
+function activateResource(resourceId: string): void {
+  emit('resource-activate', Object.freeze({ documentId: props.documentId, path: props.path, resourceId }))
+}
+
+function activateAction(actionId: string): void {
+  emit('action', Object.freeze({ documentId: props.documentId, path: props.path, actionId }))
+}
+
+function calloutSeverity(tone: SRichCalloutTone): SMessageSeverity {
+  if (tone === 'information' || tone === 'neutral') return 'info'
+  if (tone === 'warning') return 'warn'
+  return tone
+}
+
+function actionSeverity(appearance: SRichActionAppearance | undefined): SButtonSeverity {
+  if (appearance === 'danger') return 'danger'
+  if (appearance === 'secondary') return 'secondary'
+  return 'primary'
+}
+</script>
+
+<style lang="postcss" src="./SRichBlockNode.css" scoped></style>

package/src/components/shared/data-display/_internal/SRichInlineNode.css

@@ -0,0 +1,6 @@
+@reference "../../../../styles/reference.css";
+
+.s-rich-document__inline-code {
+  @apply rounded bg-surface-100 px-1 py-0.5 font-mono text-sm text-surface-800;
+  @apply dark:bg-surface-800 dark:text-surface-100;
+}

package/src/components/shared/data-display/_internal/SRichInlineNode.vue

@@ -0,0 +1,76 @@
+<template>
+  <template v-if="node.type === 'text'">{{ node.value }}</template>
+  <strong v-else-if="node.type === 'strong'">
+    <SRichInlineNode
+      v-for="(child, index) in node.children"
+      :key="index"
+      :node="child"
+      :document-id="documentId"
+      :path="`${path}.children[${index}]`"
+      @link-activate="emit('link-activate', $event)"
+    />
+  </strong>
+  <em v-else-if="node.type === 'emphasis'">
+    <SRichInlineNode
+      v-for="(child, index) in node.children"
+      :key="index"
+      :node="child"
+      :document-id="documentId"
+      :path="`${path}.children[${index}]`"
+      @link-activate="emit('link-activate', $event)"
+    />
+  </em>
+  <code v-else-if="node.type === 'inlineCode'" class="s-rich-document__inline-code">{{ node.code }}</code>
+  <SLink
+    v-else-if="node.type === 'link'"
+    :href="node.href"
+    :title="node.title"
+    :active="node.current"
+    variant="document"
+    wrap="anywhere"
+    @click.prevent="activateLink"
+  >
+    <SRichInlineNode
+      v-for="(child, index) in node.children"
+      :key="index"
+      :node="child"
+      :document-id="documentId"
+      :path="`${path}.children[${index}]`"
+      @link-activate="emit('link-activate', $event)"
+    />
+  </SLink>
+  <AsyncSRichMath v-else-if="node.type === 'mathInline'" :source="node.source" display="inline" />
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent } from 'vue'
+
+import SLink from '../../controls/SLink.vue'
+import type { SRichDocumentLinkActivate, SRichInlineNode } from '../richDocument'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  node: SRichInlineNode
+  documentId: string
+  path: string
+}>()
+
+const emit = defineEmits<{
+  'link-activate': [payload: SRichDocumentLinkActivate]
+}>()
+
+const AsyncSRichMath = defineAsyncComponent(() => import('./SRichMath.vue'))
+
+function activateLink(): void {
+  if (props.node.type !== 'link') return
+  emit('link-activate', Object.freeze({
+    documentId: props.documentId,
+    path: props.path,
+    href: props.node.href,
+    ...(props.node.title === undefined ? {} : { title: props.node.title }),
+  }))
+}
+</script>
+
+<style lang="postcss" src="./SRichInlineNode.css" scoped></style>

package/src/components/shared/data-display/_internal/SRichMath.css

@@ -0,0 +1,42 @@
+@reference "../../../../styles/reference.css";
+
+.s-rich-math {
+  min-width: 0;
+}
+
+.s-rich-math[data-display='block'] {
+  max-width: 100%;
+  overflow-x: auto;
+  padding-block: var(--s-space-content-gap);
+  text-align: center;
+}
+
+.s-rich-math__surface:empty {
+  display: none;
+}
+
+.s-rich-math__fallback,
+.s-rich-math__error code {
+  @apply rounded bg-surface-100 px-1 py-0.5 font-mono text-sm text-surface-700;
+  @apply dark:bg-surface-800 dark:text-surface-200;
+}
+
+.s-rich-math__error {
+  @apply inline-flex min-w-0 flex-wrap items-baseline gap-2 text-danger-700 dark:text-danger-300;
+}
+
+.s-rich-math__assistive {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.s-rich-math .katex-display {
+  margin: 0;
+}

package/src/components/shared/data-display/_internal/SRichMath.vue

@@ -0,0 +1,102 @@
+<template>
+  <component
+    :is="validatedDisplay === 'block' ? 'div' : 'span'"
+    class="s-rich-math"
+    :data-display="validatedDisplay"
+    :data-state="state"
+  >
+    <span ref="surface" class="s-rich-math__surface" />
+    <code v-if="state === 'loading'" class="s-rich-math__fallback">{{ validatedSource }}</code>
+    <span v-if="state === 'loading'" class="s-rich-math__assistive" role="status">{{ t('editor.mathLoading') }}</span>
+    <span v-if="state === 'error'" class="s-rich-math__error" role="alert">
+      <span>{{ t('editor.mathError') }}</span>
+      <code>{{ validatedSource }}</code>
+    </span>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import 'katex/dist/katex.min.css'
+
+import { useUiKitLocale } from '../../../../composables/useUiKitLocale'
+import { validateExactString, validateNonEmptyString } from '../../../../internal/runtimeContract'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<{
+  source: string
+  display?: 'inline' | 'block'
+  label?: string
+}>(), {
+  display: 'inline',
+  label: undefined,
+})
+
+const { t } = useUiKitLocale()
+const surface = ref<HTMLElement | null>(null)
+const state = ref<'loading' | 'ready' | 'error'>('loading')
+const validatedSource = computed(() => validateNonEmptyString('SRichMath', 'source', props.source))
+const validatedDisplay = computed(() => validateExactString(
+  'SRichMath',
+  'display',
+  props.display,
+  ['inline', 'block'] as const,
+))
+const validatedLabel = computed(() => props.label === undefined
+  ? validatedSource.value
+  : validateNonEmptyString('SRichMath', 'label', props.label))
+let mounted = false
+let generation = 0
+
+async function renderMath(): Promise<void> {
+  if (!mounted) return
+  const target = surface.value
+  if (!target) throw new Error('SRichMath: render surface is unavailable.')
+  const currentGeneration = generation += 1
+  state.value = 'loading'
+  target.replaceChildren()
+  try {
+    const katex = await import('katex')
+    if (currentGeneration !== generation || !mounted) return
+    katex.default.render(validatedSource.value, target, {
+      displayMode: validatedDisplay.value === 'block',
+      output: 'htmlAndMathml',
+      strict: 'error',
+      throwOnError: true,
+      trust: false,
+      maxExpand: 1_000,
+      maxSize: 20,
+    })
+    target.setAttribute('role', 'math')
+    target.setAttribute('aria-label', validatedLabel.value)
+    state.value = 'ready'
+  } catch {
+    if (currentGeneration !== generation || !mounted) return
+    target.replaceChildren()
+    target.removeAttribute('role')
+    target.removeAttribute('aria-label')
+    state.value = 'error'
+  }
+}
+
+onMounted(() => {
+  mounted = true
+  void renderMath()
+})
+
+watch(
+  () => [props.source, props.display, props.label] as const,
+  () => { void renderMath() },
+)
+
+onBeforeUnmount(() => {
+  mounted = false
+  generation += 1
+  surface.value?.replaceChildren()
+  surface.value?.removeAttribute('role')
+  surface.value?.removeAttribute('aria-label')
+})
+</script>
+
+<style lang="postcss" src="./SRichMath.css"></style>