@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiEditorImageToolbar.vue

@@ -0,0 +1,415 @@
+<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
+import type { PropType } from 'vue'
+import {
+  checkHydratedRoot,
+  concat,
+  createDispatch,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
+import { acceptsControllerWrite } from './props'
+import { checkedProp, propValidityState, vPropValidity } from './props'
+import UiButton from './UiButton.vue'
+import UiCluster from './UiCluster.vue'
+import UiEditorToolbar from './UiEditorToolbar.vue'
+import UiFormField from './UiFormField.vue'
+import UiIcon from './UiIcon.vue'
+import UiIconButton from './UiIconButton.vue'
+import UiInput from './UiInput.vue'
+import UiPopover from './UiPopover.vue'
+import UiStack from './UiStack.vue'
+import UiText from './UiText.vue'
+import UiTooltip from './UiTooltip.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const propValidityContract = {
+  props: {
+    alt: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'alt' },
+      description: 'The selected image\'s description, which the description form starts from.',
+      default: '',
+    },
+    placement: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'placement' },
+      description: 'How the selected image sits in the text; its command shows as pressed.',
+      values: ['block', 'center', 'wrap-left', 'wrap-right'],
+      default: 'block',
+    },
+    target: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'target' },
+      description:
+        'Identifies the image the toolbar acts on. When it changes, an open description draft is cancelled rather than applied to another image.',
+      default: '',
+    },
+  },
+} as const
+const props = defineProps({
+  alt: { type: null as unknown as PropType<string | null>, default: '' },
+  placement: {
+    type: null as unknown as PropType<'block' | 'center' | 'wrap-left' | 'wrap-right' | null>,
+    default: 'block',
+  },
+  target: { type: null as unknown as PropType<string | null>, default: '' },
+})
+const acceptedProps: Record<string, unknown> = { alt: '', placement: 'block', target: '' }
+const checkedProps = computed(() => ({
+  alt: checkedProp<string>(
+    props['alt'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'alt',
+    acceptedProps,
+  ) as string,
+  placement: checkedProp<'block' | 'center' | 'wrap-left' | 'wrap-right'>(
+    props['placement'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'placement',
+    acceptedProps,
+  ) as 'block' | 'center' | 'wrap-left' | 'wrap-right',
+  target: checkedProp<string>(
+    props['target'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'target',
+    acceptedProps,
+  ) as string,
+}))
+void checkedProps.value
+watchSyncEffect(() => {
+  void checkedProps.value
+})
+const reflectedProp = useReflectedProp()
+const hydrationInstance = getCurrentInstance()
+const emit = defineEmits<{
+  'update:alt': [value: string]
+  'update:placement': [value: string]
+  placement: [
+    event: CustomEvent<{ readonly placement: 'block' | 'center' | 'wrap-left' | 'wrap-right' }>,
+  ]
+  describe: [event: CustomEvent<{ readonly alt: string }>]
+  delete: [event: CustomEvent<Readonly<Record<string, unknown>>>]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const base = ref('ui-editor-image-toolbar')
+const describing = ref(false)
+const draft = ref('')
+let guardedPrevious: any = null
+const guarded = computed(() => {
+  const candidate: any = concat(base.value, '-block')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedPrevious
+  return guardedPrevious = candidate
+})
+let guardedBindingPrevious: any = null
+const guardedBinding = computed(() => {
+  const candidate: any = ((objectValue: any, indexValue: any) =>
+    objectValue === Symbol.for('html-next.invalid-result')
+      || indexValue === Symbol.for('html-next.invalid-result')
+      ? Symbol.for('html-next.invalid-result')
+      : objectValue[indexValue])(
+      { true: 'outline', false: 'ghost' },
+      concat(checkedProps.value.placement === 'block'),
+    )
+  if (candidate === Symbol.for('html-next.invalid-result')) {
+    return guardedBindingPrevious
+  }
+  return guardedBindingPrevious = candidate
+})
+let guardedBinding2Previous: any = null
+const guardedBinding2 = computed(() => {
+  const candidate: any = concat(checkedProps.value.placement === 'block')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding2Previous
+  return guardedBinding2Previous = candidate
+})
+let guardedBinding3Previous: any = null
+const guardedBinding3 = computed(() => {
+  const candidate: any = concat(base.value, '-center')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding3Previous
+  return guardedBinding3Previous = candidate
+})
+let guardedBinding4Previous: any = null
+const guardedBinding4 = computed(() => {
+  const candidate: any = ((objectValue: any, indexValue: any) =>
+    objectValue === Symbol.for('html-next.invalid-result')
+      || indexValue === Symbol.for('html-next.invalid-result')
+      ? Symbol.for('html-next.invalid-result')
+      : objectValue[indexValue])(
+      { true: 'outline', false: 'ghost' },
+      concat(checkedProps.value.placement === 'center'),
+    )
+  if (candidate === Symbol.for('html-next.invalid-result')) {
+    return guardedBinding4Previous
+  }
+  return guardedBinding4Previous = candidate
+})
+let guardedBinding5Previous: any = null
+const guardedBinding5 = computed(() => {
+  const candidate: any = concat(checkedProps.value.placement === 'center')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding5Previous
+  return guardedBinding5Previous = candidate
+})
+let guardedBinding6Previous: any = null
+const guardedBinding6 = computed(() => {
+  const candidate: any = concat(base.value, '-wrap-left')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding6Previous
+  return guardedBinding6Previous = candidate
+})
+let guardedBinding7Previous: any = null
+const guardedBinding7 = computed(() => {
+  const candidate: any = ((objectValue: any, indexValue: any) =>
+    objectValue === Symbol.for('html-next.invalid-result')
+      || indexValue === Symbol.for('html-next.invalid-result')
+      ? Symbol.for('html-next.invalid-result')
+      : objectValue[indexValue])(
+      { true: 'outline', false: 'ghost' },
+      concat(checkedProps.value.placement === 'wrap-left'),
+    )
+  if (candidate === Symbol.for('html-next.invalid-result')) {
+    return guardedBinding7Previous
+  }
+  return guardedBinding7Previous = candidate
+})
+let guardedBinding8Previous: any = null
+const guardedBinding8 = computed(() => {
+  const candidate: any = concat(checkedProps.value.placement === 'wrap-left')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding8Previous
+  return guardedBinding8Previous = candidate
+})
+let guardedBinding9Previous: any = null
+const guardedBinding9 = computed(() => {
+  const candidate: any = concat(base.value, '-wrap-right')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding9Previous
+  return guardedBinding9Previous = candidate
+})
+let guardedBinding10Previous: any = null
+const guardedBinding10 = computed(() => {
+  const candidate: any = ((objectValue: any, indexValue: any) =>
+    objectValue === Symbol.for('html-next.invalid-result')
+      || indexValue === Symbol.for('html-next.invalid-result')
+      ? Symbol.for('html-next.invalid-result')
+      : objectValue[indexValue])(
+      { true: 'outline', false: 'ghost' },
+      concat(checkedProps.value.placement === 'wrap-right'),
+    )
+  if (candidate === Symbol.for('html-next.invalid-result')) {
+    return guardedBinding10Previous
+  }
+  return guardedBinding10Previous = candidate
+})
+let guardedBinding11Previous: any = null
+const guardedBinding11 = computed(() => {
+  const candidate: any = concat(checkedProps.value.placement === 'wrap-right')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding11Previous
+  return guardedBinding11Previous = candidate
+})
+let guardedBinding12Previous: any = null
+const guardedBinding12 = computed(() => {
+  const candidate: any = concat(base.value, '-delete')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding12Previous
+  return guardedBinding12Previous = candidate
+})
+let guardedBinding13Previous: any = null
+const guardedBinding13 = computed(() => {
+  const candidate: any = concat(base.value, '-block')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding13Previous
+  return guardedBinding13Previous = candidate
+})
+let guardedBinding14Previous: any = null
+const guardedBinding14 = computed(() => {
+  const candidate: any = concat(base.value, '-center')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding14Previous
+  return guardedBinding14Previous = candidate
+})
+let guardedBinding15Previous: any = null
+const guardedBinding15 = computed(() => {
+  const candidate: any = concat(base.value, '-wrap-left')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding15Previous
+  return guardedBinding15Previous = candidate
+})
+let guardedBinding16Previous: any = null
+const guardedBinding16 = computed(() => {
+  const candidate: any = concat(base.value, '-wrap-right')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding16Previous
+  return guardedBinding16Previous = candidate
+})
+let guardedBinding17Previous: any = null
+const guardedBinding17 = computed(() => {
+  const candidate: any = concat(base.value, '-delete')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding17Previous
+  return guardedBinding17Previous = candidate
+})
+let guardedBinding18Previous: any = null
+const guardedBinding18 = computed(() => {
+  const candidate: any = concat(base.value, '-alt')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding18Previous
+  return guardedBinding18Previous = candidate
+})
+let guardedBinding19Previous: any = null
+const guardedBinding19 = computed(() => {
+  const candidate: any = concat(base.value, '-alt')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding19Previous
+  return guardedBinding19Previous = candidate
+})
+provide('html-next:ui-editor-image-toolbar:base', base)
+provide('html-next:ui-editor-image-toolbar:describing', describing)
+provide('html-next:ui-editor-image-toolbar:draft', draft)
+checkHydratedRoot('div', 'ui-editor-image-toolbar')
+
+const isPlacementDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && ((detail as Record<string, unknown>)['placement'] === 'block'
+    || (detail as Record<string, unknown>)['placement'] === 'center'
+    || (detail as Record<string, unknown>)['placement'] === 'wrap-left'
+    || (detail as Record<string, unknown>)['placement'] === 'wrap-right')
+  && Object.keys(detail as object).every((key) => ['placement'].includes(key)))
+const isDescribeDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && typeof (detail as Record<string, unknown>)['alt'] === 'string'
+  && Object.keys(detail as object).every((key) => ['alt'].includes(key)))
+const isDeleteDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && Object.values(detail as object).every((item: unknown) => true))
+const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
+  checks: {
+    placement: isPlacementDetail,
+    describe: isDescribeDetail,
+    delete: isDeleteDetail,
+  },
+  modeled: ['alt', 'placement'],
+})
+
+useComponentHost(() => import('../components/ui-editor-image-toolbar/ui-editor-image-toolbar.js'), {
+  root,
+  dispatch,
+  acceptsState: (name: string, keys: readonly string[], value: unknown) =>
+    acceptsControllerWrite(
+      value,
+      ({
+        base: { kind: 'terminal', name: 'string' },
+        describing: { kind: 'terminal', name: 'boolean' },
+        draft: { kind: 'terminal', name: 'string' },
+      } as Record<string, any>)[name],
+      keys,
+    ),
+  controllerSource: {
+    specifier: '../components/ui-editor-image-toolbar/ui-editor-image-toolbar.js',
+    definition: './components/ui-editor-image-toolbar/ui-editor-image-toolbar.html',
+  },
+  props: checkedProps,
+  propInputs: (name: string) => {
+    const incoming = hydrationInstance?.vnode.props
+    const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
+    return incoming !== null && incoming !== undefined
+      ? (incoming[name] ?? incoming[kebab] ?? null)
+      : null
+  },
+  propNames: ['alt', 'placement', 'target'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
+  state: { base, describing, draft },
+})
+</script>
+
+<template>
+  <div
+    v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-alt="reflectedProp('alt', 'alt', checkedProps.alt, undefined, false)"
+    :data-placement="reflectedProp('placement', 'placement', checkedProps.placement, undefined, false)"
+    :data-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
+    ref="root"
+  >
+    <UiText as="div" font="sans"><UiEditorToolbar
+        aria-label="Image actions"
+        :floating="true"
+      ><UiIconButton
+          label="Image in line"
+          size="sm"
+          data-image-placement="block"
+          :id="guarded"
+          :variant="guardedBinding"
+          :aria-pressed="guardedBinding2"
+        ><UiIcon name="panel-top" size="sm" /></UiIconButton>
+        <UiIconButton
+          label="Center image"
+          size="sm"
+          data-image-placement="center"
+          :id="guardedBinding3"
+          :variant="guardedBinding4"
+          :aria-pressed="guardedBinding5"
+        ><UiIcon name="align-center" size="sm" /></UiIconButton>
+        <UiIconButton
+          label="Wrap text to the right"
+          size="sm"
+          data-image-placement="wrap-left"
+          :id="guardedBinding6"
+          :variant="guardedBinding7"
+          :aria-pressed="guardedBinding8"
+        ><UiIcon name="panel-left" size="sm" /></UiIconButton>
+        <UiIconButton
+          label="Wrap text to the left"
+          size="sm"
+          data-image-placement="wrap-right"
+          :id="guardedBinding9"
+          :variant="guardedBinding10"
+          :aria-pressed="guardedBinding11"
+        ><UiIcon name="panel-right" size="sm" /></UiIconButton>
+        <UiIconButton label="Image description" size="sm" variant="ghost" :id="base"><UiIcon
+            name="file-text"
+            size="sm"
+          /></UiIconButton>
+        <UiIconButton
+          label="Delete image"
+          size="sm"
+          variant="ghost"
+          data-image-action="delete"
+          :id="guardedBinding12"
+        ><UiIcon name="trash" size="sm" /></UiIconButton></UiEditorToolbar>
+      <UiTooltip :for="guardedBinding13">Image in line</UiTooltip>
+      <UiTooltip :for="guardedBinding14">Center image</UiTooltip>
+      <UiTooltip :for="guardedBinding15">Wrap text to the right</UiTooltip>
+      <UiTooltip :for="guardedBinding16">Wrap text to the left</UiTooltip>
+      <UiTooltip :for="base">Image description</UiTooltip>
+      <UiTooltip :for="guardedBinding17">Delete image</UiTooltip>
+      <UiPopover
+        data-image-description=""
+        size="sm"
+        aria-label="Image description"
+        :for="base"
+        :open="describing"
+      ><form aria-label="Image description">
+          <UiStack gap="s"><UiFormField><label slot="label" :for="guardedBinding18">Alt text</label>
+              <UiInput
+                data-image-alt=""
+                size="sm"
+                :id="guardedBinding19"
+                :value="draft"
+              /></UiFormField>
+            <UiText size="xs" tone="secondary"
+            >Describe the image for people using a screen reader.</UiText>
+            <UiCluster justify="end" gap="xs"><UiButton
+                type="button"
+                variant="ghost"
+                tone="neutral"
+                size="sm"
+                data-image-action="cancel"
+              >Cancel</UiButton>
+              <UiButton type="submit" variant="solid" size="sm"
+              >Save</UiButton></UiCluster></UiStack>
+        </form></UiPopover></UiText>
+  </div>
+</template>

package/vue/UiEditorInsertTableGrid.d.ts

@@ -1,6 +1,4 @@
 import type { PropType } from 'vue';
-declare const _default: typeof __VLS_export;
-export default _default;
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     headerRow: {
         type: PropType<boolean | null>;
@@ -53,3 +51,5 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     maxCols: number | null;
     maxRows: number | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;