katecms 0.0.0-stage → 1.0.0-beta.1

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

@@ -0,0 +1,153 @@
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { pageLinkUrl } from "@katecms/core";
+import { relationEntriesApi } from "../../utils/relation";
+const props = defineProps({
+  fieldKey: { type: String, required: true },
+  field: { type: Object, required: false, default: () => ({ type: "page_link", label: "" }) }
+});
+const model = defineModel({ type: null });
+const rootClass = "katecms-page-link-field";
+const options = ref([]);
+const loading = ref(false);
+const loadError = ref(null);
+function optionLabel(option) {
+  return option.title || option.url;
+}
+const selectChoices = computed(() => options.value.map((option) => ({
+  val: option.url,
+  lbl: optionLabel(option)
+})));
+function findOption(url) {
+  if (!url) {
+    return void 0;
+  }
+  return options.value.find((option) => option.url === url);
+}
+function emptyValue() {
+  if (props.field?.multiple) {
+    return [];
+  }
+  return props.field?.allowNull ? null : "";
+}
+const selected = computed({
+  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, archives = []) {
+  const next = [
+    ...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((url2) => !!findOption(url2));
+    if (next.length !== urls.length) {
+      model.value = next;
+    }
+    return;
+  }
+  const url = pageLinkUrl(model.value);
+  if (!url && props.field?.allowNull && (model.value === void 0 || model.value === "")) {
+    model.value = null;
+  }
+}
+async function loadEntries() {
+  loading.value = true;
+  loadError.value = null;
+  try {
+    const res = await $fetch(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>
+.katecms-page-link-field__error {
+  margin: 0 0 0.5rem;
+  color: var(--katecms-color-danger);
+  font-size: 0.8125rem;
+}
+</style>

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

@@ -0,0 +1,108 @@
+<script setup>
+import { ref } from "vue";
+const props = defineProps({
+  fieldKey: { type: String, required: true },
+  field: { type: Object, required: false, default: () => ({ type: "password", label: "" }) },
+  autocomplete: { type: String, required: false, default: "new-password" }
+});
+defineOptions({ inheritAttrs: false });
+const model = defineModel({ type: 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>
+.katecms-password-field__toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 2.375rem;
+  padding: 0;
+  background-color: var(--katecms-color-bg);
+  border: 1px solid var(--katecms-color-border);
+  border-left: 0;
+  border-radius: 0 var(--katecms-border-radius-inter) var(--katecms-border-radius-inter) 0;
+  color: var(--katecms-color-ink);
+  cursor: pointer;
+}
+.katecms-password-field__toggle svg {
+  display: block;
+  width: 18px;
+  height: 18px;
+}
+.katecms-password-field__toggle--before-addon {
+  border-radius: 0;
+}
+.katecms-password-field__toggle:focus {
+  outline: none;
+}
+.katecms-password-field__toggle:focus-visible {
+  border-color: var(--katecms-color-accent);
+  color: var(--katecms-color-accent);
+}
+</style>

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

@@ -0,0 +1,151 @@
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import {
+  encodeRelationEntryValue,
+  isRelationEntryValue,
+  relationFieldId
+} from "@katecms/core";
+import { relationEntriesApi } from "../../utils/relation";
+const props = defineProps({
+  fieldKey: { type: String, required: true },
+  field: { type: Object, required: false, default: () => ({ type: "post_object", label: "" }) }
+});
+const model = defineModel({ type: null });
+const rootClass = "katecms-post-object-field";
+function entriesFromModel(value) {
+  const items = Array.isArray(value) ? value : value != null && value !== "" ? [value] : [];
+  return items.filter(isRelationEntryValue);
+}
+const entries = ref(entriesFromModel(model.value));
+const loading = ref(false);
+const loadError = ref(null);
+function entryLabel(entry) {
+  return entry.title || entry.slug;
+}
+const selectChoices = computed(() => entries.value.map((entry) => ({
+  val: entry.id,
+  lbl: entryLabel(entry)
+})));
+function findEntry(id) {
+  if (!id) {
+    return void 0;
+  }
+  return entries.value.find((entry) => String(entry.id) === id);
+}
+function emptyValue() {
+  if (props.field?.multiple) {
+    return [];
+  }
+  return props.field?.allowNull ? null : "";
+}
+const selected = computed({
+  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((entry2) => !!entry2).map((entry2) => encodeRelationEntryValue(entry2, 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) {
+  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((id2) => findEntry(id2)).filter((entry) => !!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 === void 0 || model.value === "")) {
+    model.value = null;
+  }
+}
+async function loadEntries() {
+  loading.value = true;
+  loadError.value = null;
+  try {
+    const res = await $fetch(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>
+.katecms-post-object-field__error {
+  margin: 0 0 0.5rem;
+  color: var(--katecms-color-danger);
+  font-size: 0.8125rem;
+}
+</style>

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

@@ -0,0 +1,163 @@
+<script setup>
+import { computed, onMounted, ref, watch } from "vue";
+import {
+  choiceMapLookup,
+  decodeChoiceValue,
+  encodeChoiceValue
+} from "@katecms/core";
+const props = defineProps({
+  fieldKey: { type: String, required: true },
+  field: { type: Object, required: false, default: () => ({ type: "radio", label: "", choices: {} }) }
+});
+const model = defineModel({ type: null });
+const rootClass = "katecms-radio-field";
+const customKeys = ref([]);
+const customDraft = ref("");
+const configuredChoices = computed(() => props.field?.choices ?? {});
+function rememberCustom(keys) {
+  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(() => {
+  const map = { ...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) {
+  return encodeChoiceValue(raw, lookup.value, props.field?.returnFormat);
+}
+function unformat(value) {
+  return decodeChoiceValue(value, lookup.value, props.field?.returnFormat);
+}
+const selected = computed({
+  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) {
+  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>
+.katecms-radio-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+.katecms-radio-field__choices {
+  display: flex;
+  gap: 0.5rem 1rem;
+}
+.katecms-radio-field__choices--vertical {
+  flex-direction: column;
+}
+.katecms-radio-field__choices--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.katecms-radio-field__item {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  cursor: pointer;
+  color: var(--katecms-color-ink);
+}
+.katecms-radio-field__item input {
+  accent-color: var(--katecms-color-accent);
+}
+.katecms-radio-field__add {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.katecms-radio-field__add :deep(.katecms-input-control) {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+</style>

package/dist/runtime/internal/fields/RangeField.vue

@@ -0,0 +1,48 @@
+<script setup>
+const rootClass = "katecms-range-field";
+defineProps({
+  fieldKey: { type: String, required: true },
+  field: { type: Object, required: false, default: () => ({ type: "range", label: "" }) }
+});
+const model = defineModel({ type: Number });
+</script>
+
+<template>
+  <KateCmsFieldWrapper
+    :field-key="fieldKey"
+    :field="field"
+  >
+    <KateCmsInputControl
+      v-model="model"
+      type="range"
+      numeric
+      :field-key="fieldKey"
+      :field="field"
+      :min="field?.min ?? void 0"
+      :max="field?.max ?? void 0"
+      :step="field?.step ?? void 0"
+    >
+      <template #append>
+        <div :class="`${rootClass}__value`">
+          {{ `${model} / ${field?.max ?? "100"}` }}
+        </div>
+      </template>
+    </KateCmsInputControl>
+  </KateCmsFieldWrapper>
+</template>
+
+<style scoped>
+.katecms-range-field__value {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  font-variant-numeric: tabular-nums;
+  font-size: 0.6875rem;
+  line-height: 1.2;
+  color: var(--katecms-color-muted);
+  pointer-events: none;
+  min-width: 20px;
+  text-align: center;
+}
+</style>