@threadlabs/looma 0.5.0 → 0.5.2

package/vue/UiEditable.vue

@@ -1,267 +1,387 @@
-<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.2 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from "vue";
-import * as controllerModule from "../components/ui-editable/ui-editable.js";
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  useTemplateRef,
+  watchEffect,
+} from 'vue'
+import * as controllerModule from '../components/ui-editable/ui-editable.js'
 
-defineOptions({ inheritAttrs: false });
+defineOptions({ inheritAttrs: false })
 
-const hn = {
-  t: (v: unknown): boolean => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
-  text: (v: unknown): string => v === undefined || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
-  attr: (v: unknown): any => v === undefined || v === null || v === false ? undefined : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? undefined : String(v),
-  enumerated: (v: unknown): any => typeof v === "boolean" ? String(v) : hn.attr(v),
-};
-
-const props = withDefaults(defineProps<{
-  actions?: boolean | null;
-  disabled?: boolean | null;
-  edit?: boolean | null;
-  hint?: string | null;
-  label?: string | null;
-  value?: string | null;
-}>(), {
-  actions: false,
-  disabled: false,
-  edit: false,
-  hint: "",
-  label: "Edit value",
-  value: "",
-});
+const props = withDefaults(
+  defineProps<{
+    actions?: boolean
+    disabled?: boolean
+    edit?: boolean
+    hint?: string
+    label?: string
+    value?: string
+  }>(),
+  {
+    actions: false,
+    disabled: false,
+    edit: false,
+    hint: '',
+    label: 'Edit value',
+    value: '',
+  },
+)
 const emit = defineEmits<{
-  "input": [detail: { readonly value: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
-  "change": [detail: { readonly value: string; readonly previousValue: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
-  "edit-change": [detail: { readonly edit: boolean; readonly reason: "activate" | "commit" | "cancel" | "light-dismiss" | "escape" | "programmatic"; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
-}>();
-const root = ref<HTMLElement | null>(null);
-const refs: Record<string, Element | undefined> = {};
-const state_internalEdit = ref<any>(false);
-const state_internalValue = ref<any>("");
-const state_draft = ref<any>("");
+  'update:edit': [value: boolean]
+  'update:value': [value: string]
+  input: [
+    detail: { readonly value: string; readonly trigger: 'keyboard' | 'pointer' | 'programmatic' },
+  ]
+  change: [
+    detail: {
+      readonly value: string
+      readonly previousValue: string
+      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+    },
+  ]
+  'edit-change': [
+    detail: {
+      readonly edit: boolean
+      readonly reason:
+        | 'activate'
+        | 'commit'
+        | 'cancel'
+        | 'light-dismiss'
+        | 'escape'
+        | 'programmatic'
+      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+    },
+  ]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const previewElement = useTemplateRef<HTMLElement>('preview')
+const inputElement = useTemplateRef<HTMLElement>('input')
+const internalEdit = ref(false)
+const internalValue = ref('')
+const draft = ref('')
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    internalEdit.value && 'internalEdit',
+    props.disabled && 'disabled',
+  ].filter(Boolean).join(' ')
+)
 
 /** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-const dispatch = (name: string, detail?: unknown): boolean => {
-  const declared = {"input":{"bubbles":true,"composed":true,"cancelable":false},"change":{"bubbles":true,"composed":true,"cancelable":false},"edit-change":{"bubbles":true,"composed":true,"cancelable":false}} as Record<string, EventInit | undefined>;
+function dispatch(name: string, detail?: unknown): boolean {
+  const declared: Record<string, EventInit | undefined> = {
+    input: { bubbles: true, composed: true, cancelable: false },
+    change: { bubbles: true, composed: true, cancelable: false },
+    'edit-change': { bubbles: true, composed: true, cancelable: false },
+  }
   const checks: Record<string, (detail: unknown) => boolean> = {
-    "input": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof (detail as Record<string, unknown>)["value"] === "string" && ((detail as Record<string, unknown>)["trigger"] === "keyboard" || (detail as Record<string, unknown>)["trigger"] === "pointer" || (detail as Record<string, unknown>)["trigger"] === "programmatic") && Object.keys(detail as object).every((key) => ["value","trigger"].includes(key))),
-    "change": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof (detail as Record<string, unknown>)["value"] === "string" && typeof (detail as Record<string, unknown>)["previousValue"] === "string" && ((detail as Record<string, unknown>)["trigger"] === "keyboard" || (detail as Record<string, unknown>)["trigger"] === "pointer" || (detail as Record<string, unknown>)["trigger"] === "programmatic") && Object.keys(detail as object).every((key) => ["value","previousValue","trigger"].includes(key))),
-    "edit-change": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof (detail as Record<string, unknown>)["edit"] === "boolean" && ((detail as Record<string, unknown>)["reason"] === "activate" || (detail as Record<string, unknown>)["reason"] === "commit" || (detail as Record<string, unknown>)["reason"] === "cancel" || (detail as Record<string, unknown>)["reason"] === "light-dismiss" || (detail as Record<string, unknown>)["reason"] === "escape" || (detail as Record<string, unknown>)["reason"] === "programmatic") && ((detail as Record<string, unknown>)["trigger"] === "keyboard" || (detail as Record<string, unknown>)["trigger"] === "pointer" || (detail as Record<string, unknown>)["trigger"] === "programmatic") && Object.keys(detail as object).every((key) => ["edit","reason","trigger"].includes(key))),
-  };
+    input: (detail) =>
+      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+      && typeof (detail as Record<string, unknown>)['value'] === 'string'
+      && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+        || (detail as Record<string, unknown>)['trigger'] === 'pointer'
+        || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
+      && Object.keys(detail as object).every((key) => ['value', 'trigger'].includes(key)),
+    change: (detail) =>
+      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+      && typeof (detail as Record<string, unknown>)['value'] === 'string'
+      && typeof (detail as Record<string, unknown>)['previousValue'] === 'string'
+      && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+        || (detail as Record<string, unknown>)['trigger'] === 'pointer'
+        || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
+      && Object.keys(detail as object).every((key) =>
+        ['value', 'previousValue', 'trigger'].includes(key)
+      ),
+    'edit-change': (detail) =>
+      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+      && typeof (detail as Record<string, unknown>)['edit'] === 'boolean'
+      && ((detail as Record<string, unknown>)['reason'] === 'activate'
+        || (detail as Record<string, unknown>)['reason'] === 'commit'
+        || (detail as Record<string, unknown>)['reason'] === 'cancel'
+        || (detail as Record<string, unknown>)['reason'] === 'light-dismiss'
+        || (detail as Record<string, unknown>)['reason'] === 'escape'
+        || (detail as Record<string, unknown>)['reason'] === 'programmatic')
+      && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+        || (detail as Record<string, unknown>)['trigger'] === 'pointer'
+        || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
+      && Object.keys(detail as object).every((key) => ['edit', 'reason', 'trigger'].includes(key)),
+  }
   if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {
-    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
+    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`)
   }
-  (emit as (name: string, detail: unknown) => void)(name, detail);
-  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail })) ?? true;
-};
-
-/** The resolved values the styles' :host-state() rules test. */
-const hostState = computed(() => (["internalEdit","disabled"] as const).flatMap((name) => {
-  const value = read(name);
-  const tokens: string[] = hn.t(value) ? [name] : [];
-  if (typeof value === "string" || typeof value === "number") tokens.push(`${name}=${encodeURIComponent(String(value))}`);
-  return tokens;
-}).join(" "));
+  const emitEvent = emit as (name: string, detail: unknown) => void
+  emitEvent(name, detail)
+  if (detail !== null && typeof detail === 'object' && 'edit' in detail) {
+    emitEvent('update:edit', (detail as Record<string, unknown>)['edit'])
+  }
+  if (detail !== null && typeof detail === 'object' && 'value' in detail) {
+    emitEvent('update:value', (detail as Record<string, unknown>)['value'])
+  }
+  return root.value?.dispatchEvent(
+    new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail }),
+  ) ?? true
+}
 
 function read(name: string): unknown {
-  if (name === "internalEdit") return state_internalEdit.value;
-  if (name === "internalValue") return state_internalValue.value;
-  if (name === "draft") return state_draft.value;
-  return (props as Record<string, unknown>)[name];
+  if (name === 'internalEdit') return internalEdit.value
+  if (name === 'internalValue') return internalValue.value
+  if (name === 'draft') return draft.value
+  return (props as Record<string, unknown>)[name]
 }
 
 function write(name: string, value: unknown): boolean {
-  if (name === "internalEdit") { state_internalEdit.value = value; return true; }
-  if (name === "internalValue") { state_internalValue.value = value; return true; }
-  if (name === "draft") { state_draft.value = value; return true; }
-  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
+  if (name === 'internalEdit') {
+    internalEdit.value = value as never
+    return true
+  }
+  if (name === 'internalValue') {
+    internalValue.value = value as never
+    return true
+  }
+  if (name === 'draft') {
+    draft.value = value as never
+    return true
+  }
+  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`)
 }
 
-const stops: Array<() => void> = [];
+const stops: Array<() => void> = []
 const host = {
-  get element(): Element { return root.value as Element; },
+  get element(): Element {
+    return root.value as Element
+  },
   state: new Proxy({} as Record<string, unknown>, {
-    get: (_target, name) => typeof name === "string" ? read(name) : undefined,
-    set: (_target, name, value) => typeof name === "string" && write(name, value),
+    get: (_target, name) => typeof name === 'string' ? read(name) : undefined,
+    set: (_target, name, value) => typeof name === 'string' && write(name, value),
   }),
-  refs: refs as Readonly<Record<string, Element>>,
+  refs: {
+    get preview(): Element {
+      return previewElement.value as Element
+    },
+    get input(): Element {
+      return inputElement.value as Element
+    },
+  } as Readonly<Record<string, Element>>,
   elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
     get: (_target, name) => {
-      if (typeof name !== "string" || root.value === null) return undefined;
-      const form = root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form");
-      return form?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined;
+      if (typeof name !== 'string' || root.value === null) return undefined
+      const form = root.value instanceof HTMLFormElement
+        ? root.value
+        : root.value.querySelector('form')
+      return form?.elements.namedItem(name)
+        ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined
     },
   }),
   signal<T>(initialValue: T) {
-    const value = shallowRef(initialValue);
+    const value = shallowRef(initialValue)
     return {
       get: (): T => value.value,
-      set: (next: T): void => { if (!Object.is(value.value, next)) value.value = next; },
-      update: (next: (current: T) => T): void => { const updated = next(value.value); if (!Object.is(value.value, updated)) value.value = updated; },
-    };
+      set: (next: T): void => {
+        if (!Object.is(value.value, next)) value.value = next
+      },
+      update: (next: (current: T) => T): void => {
+        const updated = next(value.value)
+        if (!Object.is(value.value, updated)) value.value = updated
+      },
+    }
   },
   computed<T>(compute: () => T) {
-    const value = computed(compute);
-    return { get: (): T => value.value };
+    const value = computed(compute)
+    return { get: (): T => value.value }
   },
   effect(run: () => void | (() => void)): () => void {
     const stop = watchEffect((onCleanup) => {
-      const cleanup = run();
-      if (typeof cleanup === "function") onCleanup(cleanup);
-    }, { flush: "post" });
-    stops.push(stop);
-    return stop;
+      const cleanup = run()
+      if (typeof cleanup === 'function') onCleanup(cleanup)
+    }, { flush: 'post' })
+    stops.push(stop)
+    return stop
   },
   on(event: string, listener: EventListener): () => void {
-    const element = root.value;
-    element?.addEventListener(event, listener);
-    const off = (): void => element?.removeEventListener(event, listener);
-    stops.push(off);
-    return off;
+    const element = root.value
+    element?.addEventListener(event, listener)
+    const off = (): void => element?.removeEventListener(event, listener)
+    stops.push(off)
+    return off
   },
   dispatch,
-};
+}
 
-let cleanup: void | (() => void);
-let ready: Promise<void> | undefined;
+let cleanup: void | (() => void)
+let ready: Promise<void> | undefined
 onMounted(() => {
-  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => { cleanup = result; });
-});
+  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => {
+    cleanup = result
+  })
+})
 onBeforeUnmount(() => {
-  for (const stop of stops.splice(0)) stop();
-  if (typeof cleanup === "function") cleanup();
-});
+  for (const stop of stops.splice(0)) stop()
+  if (typeof cleanup === 'function') cleanup()
+})
 </script>
 
 <template>
-  <div data-component="ui-editable" v-bind="$attrs" :data-ui-editable-state="hostState || undefined" ref="root"><div class="field"><button class="preview" type="button" :disabled="hn.attr(props.disabled)" :ref="(element) => { refs['preview'] = element as Element }"><span class="text">{{ hn.text(state_internalValue) }}</span><template v-if="hn.t(props.hint)"><span class="hint" aria-hidden="true">{{ hn.text(props.hint) }}</span></template></button><input class="input" type="text" :value.prop="(state_draft) as any" :aria-label="hn.enumerated(props.label)" :disabled="hn.attr((hn.t(props.disabled) || hn.t(!hn.t(state_internalEdit))))" :ref="(element) => { refs['input'] = element as Element }"></div><template v-if="hn.t(props.actions)"><div class="actions"><button class="save" type="button">Save</button><button class="cancel" type="button">Cancel</button></div></template></div>
+  <div
+    data-component="ui-editable"
+    v-bind="$attrs"
+    :data-ui-editable-state="hostState || undefined"
+    ref="root"
+  >
+    <div class="field">
+      <button class="preview" type="button" :disabled="disabled" ref="preview">
+        <span class="text">{{ internalValue }}</span>
+        <span v-if="hint" class="hint" aria-hidden="true">{{ hint }}</span>
+      </button>
+      <input
+        class="input"
+        type="text"
+        :value.prop="draft"
+        :aria-label="label"
+        :disabled="disabled || !internalEdit"
+        ref="input"
+      >
+    </div>
+    <div v-if="actions" class="actions">
+      <button class="save" type="button">Save</button>
+      <button class="cancel" type="button">Cancel</button>
+    </div>
+  </div>
 </template>
 
 <style scoped>
 [data-component~="ui-editable"] {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: var(--ui-space-2);
-      min-inline-size: 0;
-      color: var(--ui-text-primary);
-    }
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ui-space-2);
+  min-inline-size: 0;
+  color: var(--ui-text-primary);
+}
 
-    /* The value and the input share one grid cell with identical box metrics, so switching between
-     * display and edit never changes the control's size or moves the text. */
-    .field {
-      display: inline-grid;
-      min-inline-size: 8rem;
-      max-inline-size: 100%;
-    }
+/* The value and the input share one grid cell with identical box metrics, so switching between
+ * display and edit never changes the control's size or moves the text. */
+.field {
+  display: inline-grid;
+  min-inline-size: 8rem;
+  max-inline-size: 100%;
+}
 
-    .preview,
-    .input {
-      grid-area: 1 / 1;
-      box-sizing: border-box;
-      min-block-size: var(--ui-control-size-sm, 2rem);
-      margin: 0;
-      padding: var(--ui-space-1) var(--ui-space-2);
-      border: 1px solid transparent;
-      border-radius: var(--ui-radius-2);
-      font: inherit;
-      line-height: var(--ui-line-height-md);
-      color: inherit;
-      transition:
-        background-color var(--ui-motion-fast) var(--ui-motion-ease),
-        border-color var(--ui-motion-fast) var(--ui-motion-ease),
-        box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
-    }
+.preview,
+.input {
+  grid-area: 1 / 1;
+  box-sizing: border-box;
+  min-block-size: var(--ui-control-size-sm, 2rem);
+  margin: 0;
+  padding: var(--ui-space-1) var(--ui-space-2);
+  border: 1px solid transparent;
+  border-radius: var(--ui-radius-2);
+  font: inherit;
+  line-height: var(--ui-line-height-md);
+  color: inherit;
+  transition:
+    background-color var(--ui-motion-fast) var(--ui-motion-ease),
+    border-color var(--ui-motion-fast) var(--ui-motion-ease),
+    box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
+}
 
-    .preview {
-      display: inline-flex;
-      gap: var(--ui-space-2);
-      align-items: center;
-      background: transparent;
-      text-align: start;
-      cursor: pointer;
-    }
+.preview {
+  display: inline-flex;
+  gap: var(--ui-space-2);
+  align-items: center;
+  background: transparent;
+  text-align: start;
+  cursor: pointer;
+}
 
-    .preview:hover:not(:disabled) {
-      background: var(--ui-surface-muted);
-    }
+.preview:hover:not(:disabled) {
+  background: var(--ui-surface-muted);
+}
 
-    .preview:focus-visible {
-      outline: none;
-      box-shadow: var(--ui-focus-halo);
-    }
+.preview:focus-visible {
+  outline: none;
+  box-shadow: var(--ui-focus-halo);
+}
 
-    .hint {
-      color: var(--ui-text-secondary);
-      font-size: var(--ui-font-size-sm);
-    }
+.hint {
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-font-size-sm);
+}
 
-    /* Contained so it takes the value's width instead of its own default input width. */
-    .input {
-      contain: inline-size;
-      inline-size: 100%;
-      min-inline-size: 0;
-      visibility: hidden;
-      background: var(--ui-control-surface, var(--ui-surface-elevated));
-    }
+/* Contained so it takes the value's width instead of its own default input width. */
+.input {
+  contain: inline-size;
+  inline-size: 100%;
+  min-inline-size: 0;
+  visibility: hidden;
+  background: var(--ui-control-surface, var(--ui-surface-elevated));
+}
 
-    .input:focus {
-      outline: none;
-      border-color: var(--ui-control-focus, var(--ui-accent-solid));
-      box-shadow:
-        var(--ui-control-inset),
-        var(--ui-control-focus-halo-shadow);
-    }
+.input:focus {
+  outline: none;
+  border-color: var(--ui-control-focus, var(--ui-accent-solid));
+  box-shadow:
+    var(--ui-control-inset),
+    var(--ui-control-focus-halo-shadow);
+}
 
-    .input::selection {
-      background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
-    }
+.input::selection {
+  background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
+}
 
-    [data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .preview {
-      visibility: hidden;
-    }
-    [data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .input {
-      visibility: visible;
-    }
+[data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .preview {
+  visibility: hidden;
+}
+[data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .input {
+  visibility: visible;
+}
 
-    .actions {
-      display: none;
-      gap: var(--ui-space-1);
-    }
-    [data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .actions {
-      display: inline-flex;
-    }
+.actions {
+  display: none;
+  gap: var(--ui-space-1);
+}
+[data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .actions {
+  display: inline-flex;
+}
 
-    .actions button {
-      min-block-size: var(--ui-control-size-sm, 2rem);
-      padding: 0 var(--ui-space-3);
-      border: 1px solid var(--ui-border-strong);
-      border-radius: var(--ui-radius-2);
-      background: var(--ui-surface-elevated);
-      background-image: var(--ui-raised-highlight, none);
-      box-shadow: var(--ui-raised, none);
-      color: inherit;
-      font: inherit;
-      font-size: var(--ui-font-size-sm);
-      cursor: pointer;
-    }
+.actions button {
+  min-block-size: var(--ui-control-size-sm, 2rem);
+  padding: 0 var(--ui-space-3);
+  border: 1px solid var(--ui-border-strong);
+  border-radius: var(--ui-radius-2);
+  background: var(--ui-surface-elevated);
+  background-image: var(--ui-raised-highlight, none);
+  box-shadow: var(--ui-raised, none);
+  color: inherit;
+  font: inherit;
+  font-size: var(--ui-font-size-sm);
+  cursor: pointer;
+}
 
-    .actions .save {
-      border-color: var(--ui-accent-solid);
-      background: var(--ui-accent-solid);
-      color: var(--ui-text-on-accent);
-    }
+.actions .save {
+  border-color: var(--ui-accent-solid);
+  background: var(--ui-accent-solid);
+  color: var(--ui-text-on-accent);
+}
 
-    .actions button:focus-visible {
-      outline: none;
-      box-shadow: var(--ui-focus-halo);
-    }
+.actions button:focus-visible {
+  outline: none;
+  box-shadow: var(--ui-focus-halo);
+}
 
-    [data-component~="ui-editable"][data-ui-editable-state~="disabled"] .preview {
-      color: var(--ui-text-muted);
-      cursor: not-allowed;
-    }
+[data-component~="ui-editable"][data-ui-editable-state~="disabled"] .preview {
+  color: var(--ui-text-muted);
+  cursor: not-allowed;
+}
 
-    /* A component that sets its display still honours the hidden attribute on its root. */
-    [data-component~="ui-editable"][hidden] {
-      display: none;
-    }
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-editable"][hidden] {
+  display: none;
+}
 </style>

package/vue/UiEditorInsertTableGrid.d.ts

@@ -1,8 +1,8 @@
 type __VLS_Props = {
-    headerRow?: boolean | null;
-    maxCols?: number | null;
-    maxRows?: number | null;
-    open?: boolean | null;
+    headerRow?: boolean;
+    maxCols?: number;
+    maxRows?: number;
+    open?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     insert: (detail: {
@@ -17,10 +17,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
         readonly withHeaderRow: boolean;
     }) => any) | undefined;
 }>, {
-    open: boolean | null;
-    headerRow: boolean | null;
-    maxCols: number | null;
-    maxRows: number | null;
+    open: boolean;
+    headerRow: boolean;
+    maxCols: number;
+    maxRows: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;