@threadlabs/looma 0.19.1 → 0.20.0

package/vue/UiEditorTableToolbar.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')[];
-    cellAlignment?: 'left' | 'center' | 'right';
-    cellBackground?: string;
-    headerColumn?: boolean;
-    headerRow?: boolean;
-    open?: boolean;
-};
-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;
+    };
+    cellAlignment: {
+        type: PropType<"left" | "center" | "right" | null>;
+        default: string;
+    };
+    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;
+    };
+}>, {}, {}, {}, {}, 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;
+    };
+    cellAlignment: {
+        type: PropType<"left" | "center" | "right" | null>;
+        default: string;
+    };
+    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;
+    };
+}>> & 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;
-    cellAlignment: "left" | "center" | "right";
-}, {}, {}, {}, 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;
+    cellAlignment: "left" | "right" | "center" | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/vue/UiEditorTableToolbar.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.11 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { ref } from 'vue'
-import * as controllerModule from '../components/ui-editor-table-toolbar/ui-editor-table-toolbar.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,225 @@ const props = withDefaults(
         | 'delete-row'
         | 'delete-column'
         | 'delete-table'
-      )[]
-    cellAlignment?: 'left' | 'center' | 'right'
-    cellBackground?: string
-    headerColumn?: boolean
-    headerRow?: boolean
-    open?: boolean
-  }>(),
-  {
-    cellAlignment: 'left',
-    cellBackground: '',
-    headerColumn: false,
-    headerRow: false,
-    open: false,
+      )[] | null
+    >,
+    default: null,
+  },
+  cellAlignment: {
+    type: null as unknown as PropType<'left' | 'center' | 'right' | null>,
+    default: 'left',
+  },
+  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 },
+})
+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,
+  ),
+  cellAlignment: checkedProp<'left' | 'center' | 'right'>(
+    props['cellAlignment'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'cellAlignment',
+    undefined,
+    ['left', 'center', 'right'],
+  ) as 'left' | 'center' | 'right',
+  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,
+}))
+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'
+      }
+    >,
   ]
 }>()
 
@@ -107,6 +282,22 @@ const sections = ref<
 >([])
 const hasOverflow = ref(false)
 const overflowOpen = ref(false)
+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-toolbar> has an incompatible root.'),
+    {
+      name: 'HtmlDiagnosticError',
+      diagnostic: Object.freeze({
+        code: 'HR005',
+        message: 'Server markup for <ui-editor-table-toolbar> has an incompatible root.',
+      }),
+    },
+  )
+}
 
 const isActionDetail = (detail: unknown): boolean =>
   detail !== null && typeof detail === 'object' && !Array.isArray(detail)
@@ -142,10 +333,14 @@ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) =>
   },
 })
 
-useComponentHost(controllerModule.default, {
+useComponentHost(() => import('../components/ui-editor-table-toolbar/ui-editor-table-toolbar.js'), {
   root,
   dispatch,
-  props,
+  controllerSource: {
+    specifier: '../components/ui-editor-table-toolbar/ui-editor-table-toolbar.js',
+    definition: './components/ui-editor-table-toolbar/ui-editor-table-toolbar.html',
+  },
+  props: checkedProps,
   state: { alignments, structure, swatches, sections, hasOverflow, overflowOpen },
 })
 
@@ -161,6 +356,34 @@ 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>
@@ -168,31 +391,42 @@ function attribute(value: unknown): any {
     data-component="ui-editor-table-toolbar"
     role="toolbar"
     aria-label="Table actions"
-    v-bind="$attrs"
-    :hidden="!open"
+    v-bind="nativeAttrs($attrs)"
+    :hidden="!checkedProps.open"
+    :data-actions="reflectedProp('actions', 'actions', checkedProps.actions, undefined, false)"
+    :data-cell-alignment="reflectedProp('cellAlignment', 'cell-alignment', checkedProps.cellAlignment, 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)"
     ref="root"
   >
     <div v-if="alignments.length" class="group" role="group" aria-label="Cell alignment">
-      <button
-        v-for="item in alignments"
-        :key="item.action"
-        type="button"
-        class="icon-button"
-        :data-action="item.action"
-        :aria-label="item.label"
-        :title="item.label"
-        :aria-pressed="item.active"
-        :class="{ active: item.active }"
-      >
-        <UiIcon :name="item.action" />
-      </button>
+      <KeyedBoundary><button
+          v-for="item in uniqueKeys(alignments, (item, index, loop) => item.action)"
+          :key="item.action"
+          type="button"
+          class="icon-button"
+          :data-action="item.action"
+          :aria-label="item.label"
+          :title="item.label"
+          :aria-pressed="item.active"
+          :class="{ active: item.active }"
+        >
+          <UiIcon :name="item.action" />
+        </button></KeyedBoundary>
     </div>
     <div v-if="alignments.length && structure.length" class="sep" aria-hidden="true"></div>
     <div v-if="structure.length" class="group" role="group" aria-label="Table structure">
-      <button v-for="item in structure" :key="item.action" type="button" :data-action="item.action">
-        <UiIcon :name="item.icon" />
-        <span>{{ item.label }}</span>
-      </button>
+      <KeyedBoundary><button
+          v-for="item in uniqueKeys(structure, (item, indexLoop, loop) => item.action)"
+          :key="item.action"
+          type="button"
+          :data-action="item.action"
+        >
+          <UiIcon :name="item.icon" />
+          <span>{{ item.label }}</span>
+        </button></KeyedBoundary>
     </div>
     <div
       v-if="(alignments.length || structure.length) && hasOverflow"
@@ -216,47 +450,50 @@ function attribute(value: unknown): any {
         <div v-if="swatches.length" class="menu-section" role="none">
           <div class="menu-heading" role="presentation">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>{{ swatch.label }}</span>
-            </button>
+            <KeyedBoundary><button
+                v-for="swatch in uniqueKeys(swatches, (swatch, indexLoop2, 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>{{ swatch.label }}</span>
+              </button></KeyedBoundary>
           </div>
         </div>
-        <div
-          v-for="section in sections"
-          :key="section.heading"
-          class="menu-section divided"
-          role="none"
-        >
-          <div class="menu-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 }"
+        <KeyedBoundary><div
+            v-for="section in uniqueKeys(sections, (section, indexLoop3, loop) => section.heading)"
+            :key="section.heading"
+            class="menu-section divided"
+            role="none"
           >
-            <UiIcon :name="item.icon" />
-            <span>{{ item.label }}</span>
-          </button>
-        </div>
+            <div class="menu-heading" role="presentation">{{ section.heading }}</div>
+            <KeyedBoundary><button
+                v-for="item in uniqueKeys(section.items, (item, indexLoop4, 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></KeyedBoundary>
       </div>
     </div>
   </div>

package/vue/UiEditorToolbar.d.ts

@@ -1,13 +1,21 @@
-type __VLS_Props = {
-    floating?: boolean;
-};
+import type { PropType } from 'vue';
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    floating: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    floating: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    floating: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    floating: boolean | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;