katecms 0.0.0-stage → 1.0.0-beta.1

package/src/runtime/internal/fields/PageLinkField.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { pageLinkUrl } from '@katecms/core'
+import type { Field, SelectChoice, SelectModelValue } from '@katecms/core'
+import { relationEntriesApi } from '../../utils/relation'
+import type { RelationArchiveOption, RelationEntriesResponse, RelationPickerEntry } from '../../utils/relation'
+
+type PageLinkFieldConfig = Extract<Field, { type: 'page_link' }>
+
+type LinkOption = {
+  url: string
+  title: string
+  type: string
+}
+
+const props = withDefaults(defineProps<{
+  fieldKey: string
+  field?: PageLinkFieldConfig
+}>(), {
+  field: () => ({ type: 'page_link', label: '' }),
+})
+
+const model = defineModel<unknown>()
+
+const rootClass = 'katecms-page-link-field'
+const options = ref<LinkOption[]>([])
+const loading = ref(false)
+const loadError = ref<string | null>(null)
+
+function optionLabel(option: LinkOption): string {
+  return option.title || option.url
+}
+
+const selectChoices = computed<SelectChoice[]>(() => options.value.map(option => ({
+  val: option.url,
+  lbl: optionLabel(option),
+})))
+
+function findOption(url: string): LinkOption | undefined {
+  if (!url) {
+    return undefined
+  }
+  return options.value.find(option => option.url === url)
+}
+
+function emptyValue(): unknown {
+  if (props.field?.multiple) {
+    return []
+  }
+  return props.field?.allowNull ? null : ''
+}
+
+const selected = computed<SelectModelValue>({
+  get() {
+    if (props.field?.multiple) {
+      const items = Array.isArray(model.value) ? model.value : []
+      return items.map(pageLinkUrl).filter(Boolean)
+    }
+    return pageLinkUrl(model.value)
+  },
+  set(raw) {
+    if (props.field?.multiple) {
+      const urls = Array.isArray(raw) ? raw.map(item => String(item)) : []
+      model.value = urls.filter(url => !!findOption(url))
+      return
+    }
+    if (raw === '' || raw == null) {
+      model.value = emptyValue()
+      return
+    }
+    const option = findOption(String(raw))
+    model.value = option ? option.url : emptyValue()
+  },
+})
+
+const placeholder = computed(() => {
+  if (props.field?.multiple) {
+    return 'Select links'
+  }
+  if (props.field?.allowNull || !props.field?.required) {
+    return 'Select link'
+  }
+  return ''
+})
+
+function mergeOptions(fetched: RelationPickerEntry[], archives: RelationArchiveOption[] = []) {
+  const next: LinkOption[] = [
+    ...archives,
+    ...fetched.map(entry => ({
+      url: entry.url,
+      title: entry.title || entry.slug,
+      type: entry.type,
+    })),
+  ]
+  const byUrl = new Map(next.map(option => [option.url, option]))
+  for (const url of (Array.isArray(model.value) ? model.value : [model.value]).map(pageLinkUrl)) {
+    if (url && !byUrl.has(url)) {
+      byUrl.set(url, { url, title: url, type: '' })
+    }
+  }
+  options.value = [...byUrl.values()]
+}
+
+function syncModel() {
+  if (props.field?.multiple) {
+    const urls = Array.isArray(model.value) ? model.value.map(pageLinkUrl).filter(Boolean) : []
+    const next = urls.filter(url => !!findOption(url))
+    if (next.length !== urls.length) {
+      model.value = next
+    }
+    return
+  }
+  const url = pageLinkUrl(model.value)
+  if (!url && props.field?.allowNull && (model.value === undefined || model.value === '')) {
+    model.value = null
+  }
+}
+
+async function loadEntries() {
+  loading.value = true
+  loadError.value = null
+  try {
+    const res = await $fetch<RelationEntriesResponse>(relationEntriesApi({
+      postType: props.field?.postType,
+      dictionary: props.field?.dictionary,
+      archives: !!props.field?.allowArchives,
+    }))
+    mergeOptions(res.entries, res.archives)
+  }
+  catch {
+    loadError.value = 'Could not load links.'
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+onMounted(async () => {
+  await loadEntries()
+  syncModel()
+})
+</script>
+
+<template>
+  <KateCmsFieldWrapper
+    :field-key="fieldKey"
+    :field="field"
+  >
+    <div
+      v-if="loadError"
+      :class="`${rootClass}__error`"
+    >
+      {{ loadError }}
+    </div>
+    <KateCmsUiSelect
+      :id="fieldKey"
+      v-model="selected"
+      :name="fieldKey"
+      :choices="selectChoices"
+      :placeholder="placeholder"
+      :multiple="field?.multiple || false"
+      :required="field?.required || false"
+      :disabled="loading"
+      search
+      search-clearable
+      search-placeholder="Search links"
+      :selected-opt-clearable="!!field?.allowNull"
+      no-results-text="No links found"
+      :aria-label="field?.label || fieldKey"
+    />
+  </KateCmsFieldWrapper>
+</template>
+
+<style scoped lang="scss">
+@use "../../assets/styles" as *;
+
+$root: '.katecms-page-link-field';
+
+#{$root} {
+  &__error {
+    margin: 0 0 math-rem(8);
+    color: $color-danger;
+    font-size: math-rem(13);
+  }
+}
+</style>

package/src/runtime/internal/fields/PasswordField.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { Field } from '@katecms/core'
+
+type PasswordFieldConfig = Extract<Field, { type: 'password' }>
+
+const props = withDefaults(defineProps<{
+  fieldKey: string
+  field?: PasswordFieldConfig
+  autocomplete?: string
+}>(), {
+  field: () => ({ type: 'password', label: '' }),
+  autocomplete: 'new-password',
+})
+
+defineOptions({ inheritAttrs: false })
+
+const model = defineModel<string>()
+
+const visible = ref(false)
+
+const rootClass = 'katecms-password-field'
+</script>
+
+<template>
+  <KateCmsFieldWrapper
+    :field-key="fieldKey"
+    :field="field"
+  >
+    <KateCmsInputControl
+      v-model="model"
+      v-bind="$attrs"
+      :type="visible ? 'text' : 'password'"
+      :field-key="fieldKey"
+      :field="field"
+      :autocomplete="autocomplete"
+    >
+      <template #append>
+        <button
+          type="button"
+          :class="[
+            `${rootClass}__toggle`,
+            { [`${rootClass}__toggle--before-addon`]: props.field?.append },
+          ]"
+          :aria-label="visible ? 'Hide password' : 'Show password'"
+          :aria-pressed="visible"
+          @click="visible = !visible"
+        >
+          <svg
+            v-if="visible"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M3 3l18 18" />
+            <path d="M10.6 10.6a2 2 0 1 0 2.8 2.8" />
+            <path d="M9.4 5.5A9 9 0 0 1 12 5c6.5 0 10 7 10 7a18 18 0 0 1-2.2 3.1" />
+            <path d="M6.6 6.6C3.8 8.5 2 12 2 12s3.5 7 10 7a9.7 9.7 0 0 0 4.4-1" />
+          </svg>
+          <svg
+            v-else
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" />
+            <circle
+              cx="12"
+              cy="12"
+              r="3"
+            />
+          </svg>
+        </button>
+      </template>
+    </KateCmsInputControl>
+  </KateCmsFieldWrapper>
+</template>
+
+<style scoped lang="scss">
+@use "../../assets/styles" as *;
+
+$root: '.katecms-password-field';
+
+#{$root}__toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: math-rem(38);
+  padding: 0;
+  background-color: $color-bg;
+  border: 1px solid $color-border;
+  border-left: 0;
+  border-radius: 0 $border-radius-inter $border-radius-inter 0;
+  color: $color-ink;
+  cursor: pointer;
+
+  svg {
+    display: block;
+    width: 18px;
+    height: 18px;
+  }
+
+  &--before-addon {
+    border-radius: 0;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    border-color: $color-accent;
+    color: $color-accent;
+  }
+}
+</style>

package/src/runtime/internal/fields/PostObjectField.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import {
+  encodeRelationEntryValue,
+  isRelationEntryValue,
+  relationFieldId,
+} from '@katecms/core'
+import type { Field, RelationEntryValue, SelectChoice, SelectModelValue } from '@katecms/core'
+import { relationEntriesApi } from '../../utils/relation'
+import type { RelationEntriesResponse, RelationPickerEntry } from '../../utils/relation'
+
+type PostObjectFieldConfig = Extract<Field, { type: 'post_object' }>
+
+const props = withDefaults(defineProps<{
+  fieldKey: string
+  field?: PostObjectFieldConfig
+}>(), {
+  field: () => ({ type: 'post_object', label: '' }),
+})
+
+const model = defineModel<unknown>()
+
+const rootClass = 'katecms-post-object-field'
+
+function entriesFromModel(value: unknown): RelationEntryValue[] {
+  const items = Array.isArray(value) ? value : value != null && value !== '' ? [value] : []
+  return items.filter(isRelationEntryValue)
+}
+
+const entries = ref<RelationPickerEntry[]>(entriesFromModel(model.value))
+const loading = ref(false)
+const loadError = ref<string | null>(null)
+
+function entryLabel(entry: RelationPickerEntry): string {
+  return entry.title || entry.slug
+}
+
+const selectChoices = computed<SelectChoice[]>(() => entries.value.map(entry => ({
+  val: entry.id,
+  lbl: entryLabel(entry),
+})))
+
+function findEntry(id: string): RelationPickerEntry | undefined {
+  if (!id) {
+    return undefined
+  }
+  return entries.value.find(entry => String(entry.id) === id)
+}
+
+function emptyValue(): unknown {
+  if (props.field?.multiple) {
+    return []
+  }
+  return props.field?.allowNull ? null : ''
+}
+
+const selected = computed<SelectModelValue>({
+  get() {
+    if (props.field?.multiple) {
+      return Array.isArray(model.value) ? model.value.map(relationFieldId).filter(Boolean) : []
+    }
+    return relationFieldId(model.value)
+  },
+  set(raw) {
+    if (props.field?.multiple) {
+      const ids = Array.isArray(raw) ? raw.map(id => String(id)) : []
+      model.value = ids
+        .map(id => findEntry(id))
+        .filter((entry): entry is RelationPickerEntry => !!entry)
+        .map(entry => encodeRelationEntryValue(entry, props.field?.returnFormat))
+      return
+    }
+    if (raw === '' || raw == null) {
+      model.value = emptyValue()
+      return
+    }
+    const entry = findEntry(String(raw))
+    model.value = entry
+      ? encodeRelationEntryValue(entry, props.field?.returnFormat)
+      : emptyValue()
+  },
+})
+
+const placeholder = computed(() => {
+  if (props.field?.multiple) {
+    return 'Select entries'
+  }
+  if (props.field?.allowNull || !props.field?.required) {
+    return 'Select entry'
+  }
+  return ''
+})
+
+function mergeEntries(fetched: RelationPickerEntry[]) {
+  const byId = new Map(fetched.map(entry => [entry.id, entry]))
+  for (const existing of entries.value) {
+    if (!byId.has(existing.id)) {
+      byId.set(existing.id, existing)
+    }
+  }
+  entries.value = [...byId.values()]
+}
+
+function syncModel() {
+  if (props.field?.multiple) {
+    const ids = Array.isArray(model.value) ? model.value.map(relationFieldId).filter(Boolean) : []
+    const next = ids
+      .map(id => findEntry(id))
+      .filter((entry): entry is RelationPickerEntry => !!entry)
+    if (next.length !== ids.length) {
+      model.value = next.map(entry => encodeRelationEntryValue(entry, props.field?.returnFormat))
+    }
+    return
+  }
+  const id = relationFieldId(model.value)
+  if (!id && props.field?.allowNull && (model.value === undefined || model.value === '')) {
+    model.value = null
+  }
+}
+
+async function loadEntries() {
+  loading.value = true
+  loadError.value = null
+  try {
+    const res = await $fetch<RelationEntriesResponse>(relationEntriesApi({
+      postType: props.field?.postType,
+      dictionary: props.field?.dictionary,
+    }))
+    mergeEntries(res.entries)
+  }
+  catch {
+    loadError.value = 'Could not load entries.'
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+onMounted(async () => {
+  await loadEntries()
+  syncModel()
+})
+</script>
+
+<template>
+  <KateCmsFieldWrapper
+    :field-key="fieldKey"
+    :field="field"
+  >
+    <div
+      v-if="loadError"
+      :class="`${rootClass}__error`"
+    >
+      {{ loadError }}
+    </div>
+    <KateCmsUiSelect
+      :id="fieldKey"
+      v-model="selected"
+      :name="fieldKey"
+      :choices="selectChoices"
+      :placeholder="placeholder"
+      :multiple="field?.multiple || false"
+      :required="field?.required || false"
+      :disabled="loading"
+      search
+      search-clearable
+      search-placeholder="Search entries"
+      :selected-opt-clearable="!!field?.allowNull"
+      no-results-text="No entries found"
+      :aria-label="field?.label || fieldKey"
+    />
+  </KateCmsFieldWrapper>
+</template>
+
+<style scoped lang="scss">
+@use "../../assets/styles" as *;
+
+$root: '.katecms-post-object-field';
+
+#{$root} {
+  &__error {
+    margin: 0 0 math-rem(8);
+    color: $color-danger;
+    font-size: math-rem(13);
+  }
+}
+</style>

package/src/runtime/internal/fields/RadioField.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import {
+  choiceMapLookup,
+  decodeChoiceValue,
+  encodeChoiceValue,
+} from '@katecms/core'
+import type { ChoiceMap, Field } from '@katecms/core'
+
+type RadioFieldConfig = Extract<Field, { type: 'radio' }>
+
+const props = withDefaults(defineProps<{
+  fieldKey: string
+  field?: RadioFieldConfig
+}>(), {
+  field: () => ({ type: 'radio', label: '', choices: {} }),
+})
+
+const model = defineModel<unknown>()
+
+const rootClass = 'katecms-radio-field'
+const customKeys = ref<string[]>([])
+const customDraft = ref('')
+
+const configuredChoices = computed<ChoiceMap>(() => props.field?.choices ?? {})
+
+function rememberCustom(keys: string[]) {
+  const configured = configuredChoices.value
+  for (const key of keys) {
+    if (!key || key in configured || customKeys.value.includes(key)) {
+      continue
+    }
+    customKeys.value = [...customKeys.value, key]
+  }
+}
+
+const displayChoices = computed<ChoiceMap>(() => {
+  const map: ChoiceMap = { ...configuredChoices.value }
+  for (const key of customKeys.value) {
+    if (!(key in map)) {
+      map[key] = key
+    }
+  }
+  return map
+})
+
+const lookup = computed(() => choiceMapLookup(displayChoices.value))
+
+function format(raw: string): unknown {
+  return encodeChoiceValue(raw, lookup.value, props.field?.returnFormat)
+}
+
+function unformat(value: unknown): string {
+  return decodeChoiceValue(value, lookup.value, props.field?.returnFormat)
+}
+
+const selected = computed<string>({
+  get: () => unformat(model.value),
+  set: (raw) => {
+    model.value = raw === '' ? '' : format(raw)
+  },
+})
+
+watch(selected, (raw) => {
+  rememberCustom(raw ? [raw] : [])
+}, { immediate: true })
+
+const canAddCustom = computed(() =>
+  !!props.field?.allowCustomChoices && customDraft.value.trim().length > 0,
+)
+
+const addLabel = computed(() => props.field?.customChoiceButtonText || 'Add')
+
+function addCustom() {
+  const term = customDraft.value.trim()
+  if (!term || !props.field?.allowCustomChoices) {
+    return
+  }
+  rememberCustom([term])
+  selected.value = term
+  customDraft.value = ''
+}
+
+onMounted(() => {
+  const raw = selected.value
+  model.value = raw === '' ? '' : format(raw)
+})
+
+function onRadioClick(value: string) {
+  if (props.field?.allowNull && selected.value === value) {
+    selected.value = ''
+  }
+}
+</script>
+
+<template>
+  <KateCmsFieldWrapper
+    :field-key="fieldKey"
+    :field="field"
+    label-tag="div"
+  >
+    <div :class="rootClass">
+      <div
+        :class="[
+          `${rootClass}__choices`,
+          `${rootClass}__choices--${field?.layout || 'vertical'}`,
+        ]"
+      >
+        <label
+          v-for="(label, value) in displayChoices"
+          :key="value"
+          :class="`${rootClass}__item`"
+        >
+          <input
+            v-model="selected"
+            type="radio"
+            :name="fieldKey"
+            :value="value"
+            @click="onRadioClick(value)"
+          >
+          <span>{{ label }}</span>
+        </label>
+      </div>
+
+      <form
+        v-if="field?.allowCustomChoices"
+        :class="`${rootClass}__add`"
+        @submit.prevent="addCustom"
+      >
+        <KateCmsInputControl
+          v-model="customDraft"
+          :field-key="`${fieldKey}_custom`"
+          :field="{ placeholder: 'Other' }"
+        />
+        <KateCmsUiButton
+          tag="button"
+          type="submit"
+          variant="secondary"
+          :disabled="!canAddCustom"
+        >
+          {{ addLabel }}
+        </KateCmsUiButton>
+      </form>
+    </div>
+  </KateCmsFieldWrapper>
+</template>
+
+<style scoped lang="scss">
+@use "../../assets/styles" as *;
+
+$root: '.katecms-radio-field';
+
+#{$root} {
+  display: flex;
+  flex-direction: column;
+  gap: math-rem(10);
+
+  &__choices {
+    display: flex;
+    gap: math-rem(8) math-rem(16);
+
+    &--vertical {
+      flex-direction: column;
+    }
+
+    &--horizontal {
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: math-rem(6);
+    cursor: pointer;
+    color: $color-ink;
+
+    input {
+      accent-color: $color-accent;
+    }
+  }
+
+  &__add {
+    display: flex;
+    align-items: center;
+    gap: math-rem(8);
+
+    :deep(.katecms-input-control) {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+  }
+}
+</style>