@threadlabs/looma 0.28.6 → 0.28.8

package/vue/UiEditorLinkCard.vue

@@ -0,0 +1,319 @@
+<!-- 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,
+  nativeAttrs,
+  text,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
+import { acceptsControllerWrite } from './props'
+import { checkedProp, propValidityState, vPropValidity } from './props'
+import UiButton from './UiButton.vue'
+import UiCard from './UiCard.vue'
+import UiCluster from './UiCluster.vue'
+import UiIcon from './UiIcon.vue'
+import UiIconButton from './UiIconButton.vue'
+import UiStack from './UiStack.vue'
+import UiText from './UiText.vue'
+import UiTooltip from './UiTooltip.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const propValidityContract = {
+  props: {
+    detail: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'detail' },
+      description: 'A second line under the label, such as where the destination lives.',
+      default: '',
+    },
+    href: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'title' },
+      description: 'The link\'s destination, shown when there is no label.',
+      default: '',
+    },
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'label' },
+      description:
+        'The resolved destination\'s name, such as a page title, shown in place of the address.',
+      default: '',
+    },
+    openHref: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'href' },
+      description:
+        'The address Open link opens in a new tab; without it the card offers no Open link. The editor passes the destination only when it is an http, https,\n      mailto, tel, or relative address.',
+      default: '',
+    },
+    targetLabel: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'targetlabel' },
+      description:
+        'What a resolved destination is called, as in "Page: Guide" for a screen reader.',
+      default: 'Item',
+    },
+  },
+} as const
+const props = defineProps({
+  detail: { type: null as unknown as PropType<string | null>, default: '' },
+  href: { type: null as unknown as PropType<string | null>, default: '' },
+  label: { type: null as unknown as PropType<string | null>, default: '' },
+  openHref: { type: null as unknown as PropType<string | null>, default: '' },
+  targetLabel: { type: null as unknown as PropType<string | null>, default: 'Item' },
+})
+const acceptedProps: Record<string, unknown> = {
+  detail: '',
+  href: '',
+  label: '',
+  openHref: '',
+  targetLabel: 'Item',
+}
+const checkedProps = computed(() => ({
+  detail: checkedProp<string>(
+    props['detail'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'detail',
+    acceptedProps,
+  ) as string,
+  href: checkedProp<string>(
+    props['href'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'href',
+    acceptedProps,
+  ) as string,
+  label: checkedProp<string>(
+    props['label'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'label',
+    acceptedProps,
+  ) as string,
+  openHref: checkedProp<string>(
+    props['openHref'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'openHref',
+    acceptedProps,
+  ) as string,
+  targetLabel: checkedProp<string>(
+    props['targetLabel'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'targetLabel',
+    acceptedProps,
+  ) as string,
+}))
+void checkedProps.value
+watchSyncEffect(() => {
+  void checkedProps.value
+})
+const reflectedProp = useReflectedProp()
+const hydrationInstance = getCurrentInstance()
+const emit = defineEmits<{
+  edit: [event: CustomEvent<Readonly<Record<string, unknown>>>]
+  remove: [event: CustomEvent<Readonly<Record<string, unknown>>>]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const base = ref('ui-editor-link-card')
+const resolved = cycleCheckedComputed(() => checkedProps.value.label !== '')
+let shownPrevious: any = null
+const shown = 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: checkedProps.value.label, false: checkedProps.value.href },
+      concat(resolved.value),
+    )
+  if (next === Symbol.for('html-next.invalid-result')) {
+    return shownPrevious
+  }
+  return shownPrevious = next
+})
+let guardedPrevious: any = null
+const guarded = 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: 'file-text', false: 'link' }, concat(resolved.value))
+  if (candidate === Symbol.for('html-next.invalid-result')) {
+    return guardedPrevious
+  }
+  return guardedPrevious = candidate
+})
+let guardedBindingPrevious: any = null
+const guardedBinding = computed(() => {
+  const candidate: any = concat(
+    ((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: checkedProps.value.targetLabel, false: 'URL' },
+        concat(resolved.value),
+      ),
+    ': ',
+    shown.value,
+  )
+  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, '-open')
+  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, '-open')
+  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, '-edit')
+  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, '-edit')
+  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, '-remove')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding6Previous
+  return guardedBinding6Previous = candidate
+})
+let guardedBinding7Previous: any = null
+const guardedBinding7 = computed(() => {
+  const candidate: any = concat(base.value, '-remove')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding7Previous
+  return guardedBinding7Previous = candidate
+})
+provide('html-next:ui-editor-link-card:base', base)
+checkHydratedRoot('div', 'ui-editor-link-card')
+
+const isEditDetail = (
+  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: {
+    edit: isEditDetail,
+    remove: isEditDetail,
+  },
+})
+
+useComponentHost(() => import('../components/ui-editor-link-card/ui-editor-link-card.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-card/ui-editor-link-card.js',
+    definition: './components/ui-editor-link-card/ui-editor-link-card.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: ['detail', 'href', 'label', 'openHref', 'targetLabel'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
+  state: { base },
+  computed: { resolved, shown },
+})
+</script>
+
+<template>
+  <div
+    v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-detail="reflectedProp('detail', 'detail', checkedProps.detail, undefined, false)"
+    :data-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
+    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-open-href="reflectedProp('openHref', 'open-href', checkedProps.openHref, undefined, false)"
+    :data-target-label="reflectedProp('targetLabel', 'target-label', checkedProps.targetLabel, undefined, false)"
+    ref="root"
+  >
+    <UiCard variant="elevated" padding="xs" size="content"><UiCluster
+        gap="xs"
+        wrap="nowrap"
+        role="group"
+        aria-label="Link actions"
+      ><UiIcon :name="guarded" />
+        <UiStack gap="none" :title="checkedProps.href" :aria-label="guardedBinding"><UiText
+            as="strong"
+            size="sm"
+            weight="medium"
+            font="sans"
+            wrap="anywhere"
+          >{{ text(shown) }}</UiText>
+          <UiText
+            v-if="checkedProps.detail !== ''"
+            as="small"
+            size="xs"
+            tone="secondary"
+            font="sans"
+          >{{ checkedProps.detail }}</UiText></UiStack>
+        <template v-if="checkedProps.openHref !== ''"><UiButton
+            as="a"
+            variant="ghost"
+            tone="neutral"
+            size="sm"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Open link"
+            :id="guardedBinding2"
+            :href="checkedProps.openHref"
+          ><UiCluster gap="xs" wrap="nowrap"><UiIcon name="external-link" />Open
+              link</UiCluster></UiButton>
+          <UiTooltip :for="guardedBinding3">Open link</UiTooltip></template>
+        <UiIconButton
+          label="Edit link"
+          variant="ghost"
+          size="sm"
+          data-link-action="edit"
+          :id="guardedBinding4"
+        ><UiIcon name="pencil" /></UiIconButton>
+        <UiTooltip :for="guardedBinding5">Edit link</UiTooltip>
+        <UiIconButton
+          label="Remove link"
+          variant="ghost"
+          size="sm"
+          data-link-action="remove"
+          :id="guardedBinding6"
+        ><UiIcon name="unlink" /></UiIconButton>
+        <UiTooltip :for="guardedBinding7">Remove link</UiTooltip></UiCluster></UiCard>
+  </div>
+</template>

package/vue/UiEditorLinkForm.d.ts

@@ -0,0 +1,165 @@
+import type { PropType } from 'vue';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    error: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    existing: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    mode: {
+        type: PropType<"url" | "target" | null>;
+        default: string;
+    };
+    newTab: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    placeholder: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    results: {
+        type: PropType<readonly ({
+            readonly id: string;
+            readonly label: string;
+            readonly detail?: string;
+        })[] | null>;
+        default: () => never[];
+    };
+    searchable: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    selected: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    status: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    text: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    textEditable: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    value: {
+        type: PropType<string | null>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: (event: CustomEvent<Readonly<Record<string, unknown>>>) => any;
+    text: (event: CustomEvent<{
+        readonly text: string;
+    }>) => any;
+    "update:value": (value: string) => any;
+    save: (event: CustomEvent<Readonly<Record<string, unknown>>>) => any;
+    "update:newTab": (value: boolean) => any;
+    "update:text": (value: string) => any;
+    destination: (event: CustomEvent<{
+        readonly value: string;
+    }>) => any;
+    "new-tab": (event: CustomEvent<{
+        readonly newTab: boolean;
+    }>) => any;
+    choose: (event: CustomEvent<{
+        readonly id: string;
+    }>) => any;
+    dismiss: (event: CustomEvent<Readonly<Record<string, unknown>>>) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    error: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    existing: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    mode: {
+        type: PropType<"url" | "target" | null>;
+        default: string;
+    };
+    newTab: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    placeholder: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    results: {
+        type: PropType<readonly ({
+            readonly id: string;
+            readonly label: string;
+            readonly detail?: string;
+        })[] | null>;
+        default: () => never[];
+    };
+    searchable: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    selected: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    status: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    text: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    textEditable: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    value: {
+        type: PropType<string | null>;
+        default: string;
+    };
+}>> & Readonly<{
+    onClear?: ((event: CustomEvent<Readonly<Record<string, unknown>>>) => any) | undefined;
+    onText?: ((event: CustomEvent<{
+        readonly text: string;
+    }>) => any) | undefined;
+    "onUpdate:value"?: ((value: string) => any) | undefined;
+    onSave?: ((event: CustomEvent<Readonly<Record<string, unknown>>>) => any) | undefined;
+    "onUpdate:newTab"?: ((value: boolean) => any) | undefined;
+    "onUpdate:text"?: ((value: string) => any) | undefined;
+    onDestination?: ((event: CustomEvent<{
+        readonly value: string;
+    }>) => any) | undefined;
+    "onNew-tab"?: ((event: CustomEvent<{
+        readonly newTab: boolean;
+    }>) => any) | undefined;
+    onChoose?: ((event: CustomEvent<{
+        readonly id: string;
+    }>) => any) | undefined;
+    onDismiss?: ((event: CustomEvent<Readonly<Record<string, unknown>>>) => any) | undefined;
+}>, {
+    value: string | null;
+    error: string | null;
+    mode: "url" | "target" | null;
+    text: string | null;
+    selected: string | null;
+    status: string | null;
+    placeholder: string | null;
+    existing: boolean | null;
+    results: readonly {
+        readonly id: string;
+        readonly label: string;
+        readonly detail?: string;
+    }[] | null;
+    searchable: boolean | null;
+    newTab: boolean | null;
+    textEditable: boolean | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/vue/UiEditorLinkForm.js

@@ -0,0 +1,2 @@
+import { t as UiEditorLinkForm_default } from "./chunks/UiEditorLinkForm.js";
+export { UiEditorLinkForm_default as default };