@threadlabs/looma 0.28.7 → 0.28.8

package/vue/UiEditorLinkForm.vue

@@ -0,0 +1,557 @@
+<!-- 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,
+  cycleCheckedComputed,
+  KeyedBoundary,
+  nativeAttrs,
+  text,
+  uniqueKeys,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
+import { acceptsControllerWrite } from './props'
+import { checkedProp, propValidityState, vPropValidity } from './props'
+import UiCheckbox from './UiCheckbox.vue'
+import UiFormField from './UiFormField.vue'
+import UiIcon from './UiIcon.vue'
+import UiIconButton from './UiIconButton.vue'
+import UiInput from './UiInput.vue'
+import UiInputGroup from './UiInputGroup.vue'
+import UiScrollArea from './UiScrollArea.vue'
+import UiSearchResultRow from './UiSearchResultRow.vue'
+import UiStack from './UiStack.vue'
+import UiText from './UiText.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const propValidityContract = {
+  props: {
+    error: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'error' },
+      description: 'A problem to show under the fields, announced as an alert.',
+      default: '',
+    },
+    existing: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'existing' },
+      description:
+        'Whether the link already exists, so the heading reads Edit link rather than Add link.',
+      default: false,
+    },
+    mode: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'mode' },
+      description:
+        'What the destination field holds: an address, which offers Open in new tab, or a search, which lists results.',
+      values: ['url', 'target'],
+      default: 'url',
+    },
+    newTab: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'checked' },
+      description: 'Whether Open in new tab is checked.',
+      default: false,
+    },
+    placeholder: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'placeholder' },
+      description: 'The destination field\'s placeholder.',
+      default: 'https://example.com',
+    },
+    results: {
+      type: {
+        kind: 'list',
+        item: {
+          kind: 'object',
+          fields: [{ name: 'id', type: { kind: 'terminal', name: 'string' }, optional: false }, {
+            name: 'label',
+            type: { kind: 'terminal', name: 'string' },
+            optional: false,
+          }, { name: 'detail', type: { kind: 'terminal', name: 'string' }, optional: true }],
+          open: false,
+        },
+      },
+      required: false,
+      target: { attribute: 'results' },
+      description: 'The destinations a search found.',
+      default: [],
+    },
+    searchable: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'searchable' },
+      description:
+        'Whether the destination field searches for a destination as well as taking an address. A searchable field has a search icon and a Clear search\n      button.',
+      default: false,
+    },
+    selected: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'selected' },
+      description: 'The id of the chosen result, which shows a check.',
+      default: '',
+    },
+    status: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'status' },
+      description:
+        'A line above the results, such as Searching… or No results found., announced politely. Shown only for a search.',
+      default: '',
+    },
+    text: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'value' },
+      description: 'The Text field\'s value.',
+      default: '',
+    },
+    textEditable: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'texteditable' },
+      description: 'Shows a Text field, for a link added where no text is selected.',
+      default: false,
+    },
+    value: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'value' },
+      description: 'The destination field\'s text: the address, or the search.',
+      default: '',
+    },
+  },
+} as const
+const props = defineProps({
+  error: { type: null as unknown as PropType<string | null>, default: '' },
+  existing: { type: null as unknown as PropType<boolean | null>, default: false },
+  mode: { type: null as unknown as PropType<'url' | 'target' | null>, default: 'url' },
+  newTab: { type: null as unknown as PropType<boolean | null>, default: false },
+  placeholder: { type: null as unknown as PropType<string | null>, default: 'https://example.com' },
+  results: {
+    type: null as unknown as PropType<
+      readonly ({ readonly id: string; readonly label: string; readonly detail?: string })[] | null
+    >,
+    default: () => [],
+  },
+  searchable: { type: null as unknown as PropType<boolean | null>, default: false },
+  selected: { type: null as unknown as PropType<string | null>, default: '' },
+  status: { type: null as unknown as PropType<string | null>, default: '' },
+  text: { type: null as unknown as PropType<string | null>, default: '' },
+  textEditable: { type: null as unknown as PropType<boolean | null>, default: false },
+  value: { type: null as unknown as PropType<string | null>, default: '' },
+})
+const acceptedProps: Record<string, unknown> = {
+  error: '',
+  existing: false,
+  mode: 'url',
+  newTab: false,
+  placeholder: 'https://example.com',
+  results: () => [],
+  searchable: false,
+  selected: '',
+  status: '',
+  text: '',
+  textEditable: false,
+  value: '',
+}
+const checkedProps = computed(() => ({
+  error: checkedProp<string>(
+    props['error'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'error',
+    acceptedProps,
+  ) as string,
+  existing: checkedProp<boolean>(
+    props['existing'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'existing',
+    acceptedProps,
+  ) as boolean,
+  mode: checkedProp<'url' | 'target'>(
+    props['mode'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'mode',
+    acceptedProps,
+  ) as 'url' | 'target',
+  newTab: checkedProp<boolean>(
+    props['newTab'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'newTab',
+    acceptedProps,
+  ) as boolean,
+  placeholder: checkedProp<string>(
+    props['placeholder'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'placeholder',
+    acceptedProps,
+  ) as string,
+  results: checkedProp<
+    readonly ({ readonly id: string; readonly label: string; readonly detail?: string })[]
+  >(
+    props['results'],
+    {
+      kind: 'list',
+      item: {
+        kind: 'object',
+        fields: [{ name: 'id', type: { kind: 'terminal', name: 'string' }, optional: false }, {
+          name: 'label',
+          type: { kind: 'terminal', name: 'string' },
+          optional: false,
+        }, { name: 'detail', type: { kind: 'terminal', name: 'string' }, optional: true }],
+        open: false,
+      },
+    },
+    false,
+    'results',
+    acceptedProps,
+  ) as readonly ({ readonly id: string; readonly label: string; readonly detail?: string })[],
+  searchable: checkedProp<boolean>(
+    props['searchable'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'searchable',
+    acceptedProps,
+  ) as boolean,
+  selected: checkedProp<string>(
+    props['selected'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'selected',
+    acceptedProps,
+  ) as string,
+  status: checkedProp<string>(
+    props['status'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'status',
+    acceptedProps,
+  ) as string,
+  text: checkedProp<string>(
+    props['text'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'text',
+    acceptedProps,
+  ) as string,
+  textEditable: checkedProp<boolean>(
+    props['textEditable'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'textEditable',
+    acceptedProps,
+  ) as boolean,
+  value: checkedProp<string>(
+    props['value'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'value',
+    acceptedProps,
+  ) as string,
+}))
+void checkedProps.value
+watchSyncEffect(() => {
+  void checkedProps.value
+})
+const reflectedProp = useReflectedProp()
+const hydrationInstance = getCurrentInstance()
+const emit = defineEmits<{
+  'update:newTab': [value: boolean]
+  'update:text': [value: string]
+  'update:value': [value: string]
+  destination: [event: CustomEvent<{ readonly value: string }>]
+  text: [event: CustomEvent<{ readonly text: string }>]
+  'new-tab': [event: CustomEvent<{ readonly newTab: boolean }>]
+  choose: [event: CustomEvent<{ readonly id: string }>]
+  clear: [event: CustomEvent<Readonly<Record<string, unknown>>>]
+  save: [event: CustomEvent<Readonly<Record<string, unknown>>>]
+  dismiss: [event: CustomEvent<Readonly<Record<string, unknown>>>]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const base = ref('ui-editor-link-form')
+let headingPrevious: any = null
+const heading = cycleCheckedComputed(() => {
+  const next: 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: 'Edit link', false: 'Add link' },
+      concat(checkedProps.value.existing),
+    )
+  if (next === Symbol.for('html-next.invalid-result')) {
+    return headingPrevious
+  }
+  return headingPrevious = next
+})
+let fieldLabelPrevious: any = null
+const fieldLabel = cycleCheckedComputed(() => {
+  const next: 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: 'Link destination', false: 'URL' },
+      concat(checkedProps.value.searchable),
+    )
+  if (next === Symbol.for('html-next.invalid-result')) {
+    return fieldLabelPrevious
+  }
+  return fieldLabelPrevious = next
+})
+let guardedPrevious: any = null
+const guarded = computed(() => {
+  const candidate: any = concat(base.value, '-destination')
+  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: 'search', false: 'link' },
+      concat(checkedProps.value.mode === 'target'),
+    )
+  if (candidate === Symbol.for('html-next.invalid-result')) {
+    return guardedBindingPrevious
+  }
+  return guardedBindingPrevious = candidate
+})
+let guardedBinding2Previous: any = null
+const guardedBinding2 = computed(() => {
+  const candidate: any = concat(base.value, '-destination')
+  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, '-destination')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding3Previous
+  return guardedBinding3Previous = candidate
+})
+let guardedBinding4Previous: any = null
+const guardedBinding4 = computed(() => {
+  const candidate: any = concat(base.value, '-text')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding4Previous
+  return guardedBinding4Previous = candidate
+})
+let guardedBinding5Previous: any = null
+const guardedBinding5 = computed(() => {
+  const candidate: any = concat(base.value, '-text')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding5Previous
+  return guardedBinding5Previous = candidate
+})
+provide('html-next:ui-editor-link-form:base', base)
+checkHydratedRoot('form', 'ui-editor-link-form')
+
+const isDestinationDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && typeof (detail as Record<string, unknown>)['value'] === 'string'
+  && Object.keys(detail as object).every((key) => ['value'].includes(key)))
+const isTextDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && typeof (detail as Record<string, unknown>)['text'] === 'string'
+  && Object.keys(detail as object).every((key) => ['text'].includes(key)))
+const isNewTabDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && typeof (detail as Record<string, unknown>)['newTab'] === 'boolean'
+  && Object.keys(detail as object).every((key) => ['newTab'].includes(key)))
+const isChooseDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && typeof (detail as Record<string, unknown>)['id'] === 'string'
+  && Object.keys(detail as object).every((key) => ['id'].includes(key)))
+const isClearDetail = (
+  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: {
+    destination: isDestinationDetail,
+    text: isTextDetail,
+    'new-tab': isNewTabDetail,
+    choose: isChooseDetail,
+    clear: isClearDetail,
+    save: isClearDetail,
+    dismiss: isClearDetail,
+  },
+  modeled: ['newTab', 'text', 'value'],
+})
+
+useComponentHost(() => import('../components/ui-editor-link-form/ui-editor-link-form.js'), {
+  root,
+  dispatch,
+  acceptsState: (name: string, keys: readonly string[], value: unknown) =>
+    acceptsControllerWrite(
+      value,
+      ({ base: { kind: 'terminal', name: 'string' } } as Record<string, any>)[name],
+      keys,
+    ),
+  controllerSource: {
+    specifier: '../components/ui-editor-link-form/ui-editor-link-form.js',
+    definition: './components/ui-editor-link-form/ui-editor-link-form.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: [
+    'error',
+    'existing',
+    'mode',
+    'newTab',
+    'placeholder',
+    'results',
+    'searchable',
+    'selected',
+    'status',
+    'text',
+    'textEditable',
+    'value',
+  ],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
+  state: { base },
+  computed: { heading, fieldLabel },
+})
+</script>
+
+<template>
+  <form
+    aria-label="Edit link"
+    v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-error="reflectedProp('error', 'error', checkedProps.error, undefined, false)"
+    :data-existing="reflectedProp('existing', 'existing', checkedProps.existing, undefined, false)"
+    :data-mode="reflectedProp('mode', 'mode', checkedProps.mode, undefined, false)"
+    :data-new-tab="reflectedProp('newTab', 'new-tab', checkedProps.newTab, undefined, false)"
+    :data-placeholder="reflectedProp('placeholder', 'placeholder', checkedProps.placeholder, undefined, false)"
+    :data-results="reflectedProp('results', 'results', checkedProps.results, undefined, false)"
+    :data-searchable="reflectedProp('searchable', 'searchable', checkedProps.searchable, undefined, false)"
+    :data-selected="reflectedProp('selected', 'selected', checkedProps.selected, undefined, false)"
+    :data-status="reflectedProp('status', 'status', checkedProps.status, undefined, false)"
+    :data-text="reflectedProp('text', 'text', checkedProps.text, undefined, false)"
+    :data-text-editable="reflectedProp('textEditable', 'text-editable', checkedProps.textEditable, undefined, false)"
+    :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
+    ref="root"
+  >
+    <UiStack gap="s"><UiText as="h3" size="sm" weight="semibold">{{ text(heading) }}</UiText>
+      <UiStack gap="s"><UiFormField :invalid="checkedProps.error !== ''"><label
+            slot="label"
+            :for="guarded"
+          >{{ text(fieldLabel) }}</label>
+          <UiInputGroup v-if="checkedProps.searchable" prefix-kind="icon"><UiIcon
+              slot="prefix"
+              :name="guardedBinding"
+            />
+            <UiInput
+              data-link-destination=""
+              data-link-search=""
+              type="text"
+              role="searchbox"
+              autocomplete="off"
+              :id="guardedBinding2"
+              :placeholder="checkedProps.placeholder"
+              :value="checkedProps.value"
+            />
+            <UiIconButton
+              v-if="checkedProps.value !== ''"
+              slot="action"
+              label="Clear search"
+              variant="ghost"
+              size="sm"
+              data-link-clear=""
+            ><UiIcon name="x" /></UiIconButton></UiInputGroup>
+          <template v-if="!checkedProps.searchable"><UiInput
+              data-link-destination=""
+              type="text"
+              inputmode="url"
+              size="sm"
+              :id="guardedBinding3"
+              :placeholder="checkedProps.placeholder"
+              :value="checkedProps.value"
+            /></template></UiFormField>
+        <UiScrollArea
+          v-if="checkedProps.mode === 'target'"
+          size="sm"
+          aria-label="Destination search results"
+        ><UiText v-if="checkedProps.status !== ''" size="sm" tone="secondary" role="status">{{
+            checkedProps.status
+          }}</UiText>
+          <KeyedBoundary><UiSearchResultRow
+              v-for="result in uniqueKeys(checkedProps.results, (result, index, loop) => result.id)"
+              :key="result.id"
+              density="compact"
+              data-link-result=""
+              :selected="result.id === checkedProps.selected"
+              :data-link-id="result.id"
+            ><UiIcon slot="leading" name="file-text" />
+              <UiText
+                slot="title"
+                as="strong"
+                size="sm"
+                weight="medium"
+                :truncate="true"
+                :title="result.label"
+              >{{ result.label }}</UiText>
+              <UiText
+                v-if="result.detail"
+                slot="meta"
+                as="span"
+                size="xs"
+                tone="secondary"
+                :truncate="true"
+                :title="result.detail"
+              >{{ result.detail }}</UiText>
+              <UiIcon
+                v-if="result.id === checkedProps.selected"
+                slot="trailing"
+                name="check"
+              /></UiSearchResultRow></KeyedBoundary></UiScrollArea>
+        <template v-if="checkedProps.mode === 'url'"><UiCheckbox
+            size="sm"
+            data-link-new-tab=""
+            :checked="checkedProps.newTab"
+          >Open in new tab</UiCheckbox></template></UiStack>
+      <template v-if="checkedProps.textEditable"><UiFormField><label
+            slot="label"
+            :for="guardedBinding4"
+          >Text</label>
+          <UiInput
+            data-link-text=""
+            size="sm"
+            :id="guardedBinding5"
+            :value="checkedProps.text"
+          /></UiFormField></template>
+      <UiText v-if="checkedProps.error !== ''" size="sm" tone="danger" role="alert">{{
+        checkedProps.error
+      }}</UiText></UiStack>
+  </form>
+</template>