@threadlabs/looma 0.19.1 → 0.21.0

package/vue/UiEditorTableContextMenu.d.ts

@@ -1,25 +1,69 @@
-type __VLS_Props = {
-    actions?: readonly ('align-left' | 'align-center' | 'align-right' | 'background-none' | 'background-gray' | 'background-yellow' | 'background-blue' | 'background-green' | 'background-red' | 'add-row-before' | 'add-row-after' | 'add-column-before' | 'add-column-after' | 'toggle-header-row' | 'toggle-header-column' | 'move-row-up' | 'move-row-down' | 'move-column-left' | 'move-column-right' | 'clear-cells' | 'merge-cells' | 'split-cell' | 'delete-row' | 'delete-column' | 'delete-table')[];
-    cellBackground?: string;
-    headerColumn?: boolean;
-    headerRow?: boolean;
-    open?: boolean;
-    scope?: 'cell' | 'row' | 'column';
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    action: (detail: {
+import type { PropType } from 'vue';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    actions: {
+        type: PropType<readonly ("align-left" | "align-center" | "align-right" | "background-none" | "background-gray" | "background-yellow" | "background-blue" | "background-green" | "background-red" | "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after" | "toggle-header-row" | "toggle-header-column" | "move-row-up" | "move-row-down" | "move-column-left" | "move-column-right" | "clear-cells" | "merge-cells" | "split-cell" | "delete-row" | "delete-column" | "delete-table")[] | null>;
+        default: null;
+    };
+    cellBackground: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    headerColumn: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    headerRow: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    open: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    scope: {
+        type: PropType<"cell" | "row" | "column" | null>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    action: (event: CustomEvent<{
         readonly action: "align-left" | "align-center" | "align-right" | "background-none" | "background-gray" | "background-yellow" | "background-blue" | "background-green" | "background-red" | "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after" | "toggle-header-row" | "toggle-header-column" | "move-row-up" | "move-row-down" | "move-column-left" | "move-column-right" | "clear-cells" | "merge-cells" | "split-cell" | "delete-row" | "delete-column" | "delete-table";
-    }) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onAction?: ((detail: {
+    }>) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    actions: {
+        type: PropType<readonly ("align-left" | "align-center" | "align-right" | "background-none" | "background-gray" | "background-yellow" | "background-blue" | "background-green" | "background-red" | "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after" | "toggle-header-row" | "toggle-header-column" | "move-row-up" | "move-row-down" | "move-column-left" | "move-column-right" | "clear-cells" | "merge-cells" | "split-cell" | "delete-row" | "delete-column" | "delete-table")[] | null>;
+        default: null;
+    };
+    cellBackground: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    headerColumn: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    headerRow: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    open: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    scope: {
+        type: PropType<"cell" | "row" | "column" | null>;
+        default: string;
+    };
+}>> & Readonly<{
+    onAction?: ((event: CustomEvent<{
         readonly action: "align-left" | "align-center" | "align-right" | "background-none" | "background-gray" | "background-yellow" | "background-blue" | "background-green" | "background-red" | "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after" | "toggle-header-row" | "toggle-header-column" | "move-row-up" | "move-row-down" | "move-column-left" | "move-column-right" | "clear-cells" | "merge-cells" | "split-cell" | "delete-row" | "delete-column" | "delete-table";
-    }) => any) | undefined;
+    }>) => any) | undefined;
 }>, {
-    open: boolean;
-    headerRow: boolean;
-    cellBackground: string;
-    headerColumn: boolean;
-    scope: "cell" | "row" | "column";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    open: boolean | null;
+    actions: readonly ("align-center" | "align-left" | "align-right" | "background-none" | "background-gray" | "background-yellow" | "background-blue" | "background-green" | "background-red" | "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after" | "toggle-header-row" | "toggle-header-column" | "move-row-up" | "move-row-down" | "move-column-left" | "move-column-right" | "clear-cells" | "merge-cells" | "split-cell" | "delete-row" | "delete-column" | "delete-table")[] | null;
+    headerRow: boolean | null;
+    cellBackground: string | null;
+    headerColumn: boolean | null;
+    scope: "row" | "cell" | "column" | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/vue/UiEditorTableContextMenu.vue

@@ -1,15 +1,16 @@
-<!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.12 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { ref } from 'vue'
-import * as controllerModule from '../components/ui-editor-table-context-menu/ui-editor-table-context-menu.js'
+import { computed, defineComponent, getCurrentInstance, h, ref, watchSyncEffect } from 'vue'
+import type { PropType, VNode } from 'vue'
 import { createDispatch, useComponentHost } from './host'
+import { checkedProp } from './props'
 import UiIcon from './UiIcon.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(
-  defineProps<{
-    actions?:
+const props = defineProps({
+  actions: {
+    type: null as unknown as PropType<
       readonly (
         | 'align-left'
         | 'align-center'
@@ -36,51 +37,222 @@ const props = withDefaults(
         | 'delete-row'
         | 'delete-column'
         | 'delete-table'
-      )[]
-    cellBackground?: string
-    headerColumn?: boolean
-    headerRow?: boolean
-    open?: boolean
-    scope?: 'cell' | 'row' | 'column'
-  }>(),
-  {
-    cellBackground: '',
-    headerColumn: false,
-    headerRow: false,
-    open: false,
-    scope: 'cell',
+      )[] | null
+    >,
+    default: null,
   },
-)
+  cellBackground: { type: null as unknown as PropType<string | null>, default: '' },
+  headerColumn: { type: null as unknown as PropType<boolean | null>, default: false },
+  headerRow: { type: null as unknown as PropType<boolean | null>, default: false },
+  open: { type: null as unknown as PropType<boolean | null>, default: false },
+  scope: { type: null as unknown as PropType<'cell' | 'row' | 'column' | null>, default: 'cell' },
+})
+const checkedProps = computed(() => ({
+  actions: checkedProp<
+    readonly (
+      | 'align-left'
+      | 'align-center'
+      | 'align-right'
+      | 'background-none'
+      | 'background-gray'
+      | 'background-yellow'
+      | 'background-blue'
+      | 'background-green'
+      | 'background-red'
+      | 'add-row-before'
+      | 'add-row-after'
+      | 'add-column-before'
+      | 'add-column-after'
+      | 'toggle-header-row'
+      | 'toggle-header-column'
+      | 'move-row-up'
+      | 'move-row-down'
+      | 'move-column-left'
+      | 'move-column-right'
+      | 'clear-cells'
+      | 'merge-cells'
+      | 'split-cell'
+      | 'delete-row'
+      | 'delete-column'
+      | 'delete-table'
+    )[]
+  >(
+    props['actions'],
+    {
+      kind: 'list',
+      item: {
+        kind: 'constrained',
+        base: { kind: 'terminal', name: 'keyword' },
+        values: [
+          'align-left',
+          'align-center',
+          'align-right',
+          'background-none',
+          'background-gray',
+          'background-yellow',
+          'background-blue',
+          'background-green',
+          'background-red',
+          'add-row-before',
+          'add-row-after',
+          'add-column-before',
+          'add-column-after',
+          'toggle-header-row',
+          'toggle-header-column',
+          'move-row-up',
+          'move-row-down',
+          'move-column-left',
+          'move-column-right',
+          'clear-cells',
+          'merge-cells',
+          'split-cell',
+          'delete-row',
+          'delete-column',
+          'delete-table',
+        ],
+      },
+    },
+    false,
+    'actions',
+    undefined,
+    undefined,
+  ),
+  cellBackground: checkedProp<string>(
+    props['cellBackground'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'cellBackground',
+    undefined,
+    undefined,
+  ) as string,
+  headerColumn: checkedProp<boolean>(
+    props['headerColumn'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'headerColumn',
+    undefined,
+    undefined,
+  ) as boolean,
+  headerRow: checkedProp<boolean>(
+    props['headerRow'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'headerRow',
+    undefined,
+    undefined,
+  ) as boolean,
+  open: checkedProp<boolean>(
+    props['open'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'open',
+    undefined,
+    undefined,
+  ) as boolean,
+  scope: checkedProp<'cell' | 'row' | 'column'>(
+    props['scope'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'scope',
+    undefined,
+    ['cell', 'row', 'column'],
+  ) as 'cell' | 'row' | 'column',
+}))
+void checkedProps.value
+watchSyncEffect(() => {
+  void checkedProps.value
+})
+function nativeAttrs(attrs: Record<string, unknown>): Record<string, unknown> {
+  const names = Object.keys(attrs)
+  if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs
+  return Object.fromEntries(names.map((name) => [
+    Object.hasOwn(Object.prototype, name)
+      ? name === '__proto__' ? '__Proto__' : name[0]!.toUpperCase() + name.slice(1)
+      : name,
+    attrs[name],
+  ]))
+}
+const KeyedFailure = defineComponent({
+  props: { error: { type: null, required: true } },
+  setup(props) {
+    return () => {
+      throw props.error
+    }
+  },
+})
+const KeyedBoundary = defineComponent({
+  setup(_props, { slots }) {
+    let last: VNode[] = []
+    return () => {
+      try {
+        last = slots.default?.() ?? []
+        return last
+      } catch (error) {
+        if (
+          !(error instanceof Error)
+          || (error as Error & { diagnostic?: { code?: string } }).diagnostic?.code !== 'HR004'
+        ) throw error
+        if (typeof window === 'undefined') throw error
+        return [...last, h(KeyedFailure, { error })]
+      }
+    }
+  },
+})
+const componentInstance = getCurrentInstance()
+function reflectedProp(
+  name: string,
+  kebab: string,
+  value: unknown,
+  fallback: string | undefined,
+  bound: boolean,
+  separator?: string,
+): string | undefined {
+  const incoming = componentInstance?.vnode.props
+  if (
+    !bound
+    && (incoming === null || incoming === undefined
+      || (!Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab)))
+  ) return fallback
+  if (value === null || value === undefined) return undefined
+  return Array.isArray(value) && separator !== undefined
+    ? value.join(separator)
+    : typeof value === 'object'
+    ? JSON.stringify(value)
+    : String(value)
+}
+const hydrationInstance = getCurrentInstance()
 const emit = defineEmits<{
   action: [
-    detail: {
-      readonly action:
-        | 'align-left'
-        | 'align-center'
-        | 'align-right'
-        | 'background-none'
-        | 'background-gray'
-        | 'background-yellow'
-        | 'background-blue'
-        | 'background-green'
-        | 'background-red'
-        | 'add-row-before'
-        | 'add-row-after'
-        | 'add-column-before'
-        | 'add-column-after'
-        | 'toggle-header-row'
-        | 'toggle-header-column'
-        | 'move-row-up'
-        | 'move-row-down'
-        | 'move-column-left'
-        | 'move-column-right'
-        | 'clear-cells'
-        | 'merge-cells'
-        | 'split-cell'
-        | 'delete-row'
-        | 'delete-column'
-        | 'delete-table'
-    },
+    event: CustomEvent<
+      {
+        readonly action:
+          | 'align-left'
+          | 'align-center'
+          | 'align-right'
+          | 'background-none'
+          | 'background-gray'
+          | 'background-yellow'
+          | 'background-blue'
+          | 'background-green'
+          | 'background-red'
+          | 'add-row-before'
+          | 'add-row-after'
+          | 'add-column-before'
+          | 'add-column-after'
+          | 'toggle-header-row'
+          | 'toggle-header-column'
+          | 'move-row-up'
+          | 'move-row-down'
+          | 'move-column-left'
+          | 'move-column-right'
+          | 'clear-cells'
+          | 'merge-cells'
+          | 'split-cell'
+          | 'delete-row'
+          | 'delete-column'
+          | 'delete-table'
+      }
+    >,
   ]
 }>()
 
@@ -101,6 +273,22 @@ const sections = ref<
     }[]
   }[]
 >([])
+const hydrationNode = hydrationInstance?.vnode.el
+if (
+  typeof window !== 'undefined' && hydrationNode != null
+  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('div'))
+) {
+  throw Object.assign(
+    new Error('HR005: Server markup for <ui-editor-table-context-menu> has an incompatible root.'),
+    {
+      name: 'HtmlDiagnosticError',
+      diagnostic: Object.freeze({
+        code: 'HR005',
+        message: 'Server markup for <ui-editor-table-context-menu> has an incompatible root.',
+      }),
+    },
+  )
+}
 
 const isActionDetail = (detail: unknown): boolean =>
   detail !== null && typeof detail === 'object' && !Array.isArray(detail)
@@ -136,12 +324,19 @@ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) =>
   },
 })
 
-useComponentHost(controllerModule.default, {
-  root,
-  dispatch,
-  props,
-  state: { swatches, sections },
-})
+useComponentHost(
+  () => import('../components/ui-editor-table-context-menu/ui-editor-table-context-menu.js'),
+  {
+    root,
+    dispatch,
+    controllerSource: {
+      specifier: '../components/ui-editor-table-context-menu/ui-editor-table-context-menu.js',
+      definition: './components/ui-editor-table-context-menu/ui-editor-table-context-menu.html',
+    },
+    props: checkedProps,
+    state: { swatches, sections },
+  },
+)
 
 function text(value: unknown): string {
   if (Array.isArray(value)) return value.map(text).join(' ')
@@ -155,56 +350,96 @@ function attribute(value: unknown): any {
   ) return undefined
   return value === true ? '' : text(value)
 }
+
+function uniqueKeys<T>(
+  items: readonly T[],
+  keyOf: (
+    item: T,
+    index: number,
+    loop: { index: number; first: boolean; last: boolean; count: number },
+  ) => unknown,
+): readonly T[] {
+  const seen = new Set<unknown>()
+  for (let index = 0; index < items.length; index += 1) {
+    const key = keyOf(items[index]!, index, {
+      index,
+      first: index === 0,
+      last: index === items.length - 1,
+      count: items.length,
+    })
+    if (seen.has(key)) {
+      const message = `A keyed list produced duplicate key \`${text(key)}\`.`
+      throw Object.assign(new Error(`HR004: ${message}`), {
+        name: 'HtmlDiagnosticError',
+        diagnostic: Object.freeze({ code: 'HR004', message }),
+      })
+    }
+    seen.add(key)
+  }
+  return items
+}
 </script>
 
 <template>
   <div
     data-component="ui-editor-table-context-menu"
     role="menu"
-    v-bind="$attrs"
-    :hidden="!open"
+    v-bind="nativeAttrs($attrs)"
+    :hidden="!checkedProps.open"
+    :data-actions="reflectedProp('actions', 'actions', checkedProps.actions, undefined, false)"
+    :data-cell-background="reflectedProp('cellBackground', 'cell-background', checkedProps.cellBackground, undefined, false)"
+    :data-header-column="reflectedProp('headerColumn', 'header-column', checkedProps.headerColumn, undefined, false)"
+    :data-header-row="reflectedProp('headerRow', 'header-row', checkedProps.headerRow, undefined, false)"
+    :data-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
+    :data-scope="reflectedProp('scope', 'scope', checkedProps.scope, undefined, false)"
     ref="root"
   >
     <div v-if="swatches?.length" class="section" role="none">
       <div class="heading" role="presentation">Cell background</div>
       <div class="swatches" role="group" aria-label="Cell background">
-        <button
-          v-for="swatch in swatches"
-          :key="swatch.action"
-          type="button"
-          class="swatch-button"
-          role="menuitemradio"
-          :aria-checked="swatch.selected"
-          :data-action="swatch.action"
-          :class="{ selected: swatch.selected }"
-        >
-          <span
-            class="swatch"
-            :class="{ default: !swatch.color }"
-            :style="{ '--_swatch': swatch.color }"
-          ></span>
-          <span class="swatch-label">{{ swatch.label }}</span>
-        </button>
+        <KeyedBoundary><button
+            v-for="swatch in uniqueKeys(swatches, (swatch, index, loop) => swatch.action)"
+            :key="swatch.action"
+            type="button"
+            class="swatch-button"
+            role="menuitemradio"
+            :aria-checked="swatch.selected"
+            :data-action="swatch.action"
+            :class="{ selected: swatch.selected }"
+          >
+            <span
+              class="swatch"
+              :class="{ default: !swatch.color }"
+              :style="{ '--_swatch': swatch.color }"
+            ></span>
+            <span class="swatch-label">{{ swatch.label }}</span>
+          </button></KeyedBoundary>
       </div>
     </div>
-    <template v-for="section in sections" :key="section.heading"><div class="sep"></div>
-      <div class="section" role="none">
-        <div class="heading" role="presentation">{{ section.heading }}</div>
-        <button
-          v-for="item in section.items"
-          :key="item.action"
-          type="button"
-          :role="attribute(({ true: 'menuitemcheckbox', false: 'menuitem' })[`${item.checkable}`])"
-          :aria-checked="typeof (({ true: item.checked, false: null })[`${item.checkable}`]) === 'boolean'
-          ? String(({ true: item.checked, false: null })[`${item.checkable}`])
-          : attribute(({ true: item.checked, false: null })[`${item.checkable}`])"
-          :data-action="item.action"
-          :class="{ danger: item.danger }"
-        >
-          <UiIcon :name="item.icon" />
-          <span>{{ item.label }}</span>
-        </button>
-      </div></template>
+    <KeyedBoundary><template
+        v-for="section in uniqueKeys(sections, (section, indexLoop, loop) => section.heading)"
+        :key="section.heading"
+      ><div class="sep"></div>
+        <div class="section" role="none">
+          <div class="heading" role="presentation">{{ section.heading }}</div>
+          <KeyedBoundary><button
+              v-for="item in uniqueKeys(section.items, (item, indexLoop2, loop) => item.action)"
+              :key="item.action"
+              type="button"
+              :role="attribute(
+                (({ true: 'menuitemcheckbox', false: 'menuitem' }) as Record<string, any>)[`${item.checkable}`],
+              )"
+              :aria-checked="typeof ((({ true: item.checked, false: null }) as Record<string, any>)[`${item.checkable}`])
+                === 'boolean'
+              ? String((({ true: item.checked, false: null }) as Record<string, any>)[`${item.checkable}`])
+              : attribute((({ true: item.checked, false: null }) as Record<string, any>)[`${item.checkable}`])"
+              :data-action="item.action"
+              :class="{ danger: item.danger }"
+            >
+              <UiIcon :name="item.icon" />
+              <span>{{ item.label }}</span>
+            </button></KeyedBoundary>
+        </div></template></KeyedBoundary>
   </div>
 </template>