katecms 0.0.0-stage → 1.0.0-beta.1

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

@@ -0,0 +1,220 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { collectPanelDefaults, isVisible } from "@katecms/core";
+import { resolveField } from "../../utils/helpers";
+import { useKateCmsFieldValues } from "../../utils/field-values";
+const props = defineProps({
+  fieldKey: { type: String, required: true },
+  field: { type: Object, required: false, default: () => ({ type: "accordion", panels: [] }) }
+});
+defineModel({ type: null });
+const rootClass = "katecms-accordion-field";
+const openIndexes = ref([]);
+const { getValues, setValue, ensureDefaults, removeKey } = useKateCmsFieldValues();
+const panels = computed(() => props.field?.panels ?? []);
+const multiExpand = computed(() => !!props.field?.multiExpand);
+const values = computed(() => getValues());
+function resolveInitialOpen() {
+  const list = panels.value;
+  if (!list.length) {
+    return [];
+  }
+  const index = typeof props.field?.open === "number" ? props.field.open : 0;
+  if (index < 0 || index >= list.length) {
+    return [];
+  }
+  return [index];
+}
+watch(
+  [panels, () => props.field?.open, multiExpand],
+  () => {
+    const valid = new Set(panels.value.map((_, i) => i));
+    const next = openIndexes.value.filter((i) => valid.has(i));
+    if (!next.length) {
+      openIndexes.value = resolveInitialOpen();
+      return;
+    }
+    if (!multiExpand.value && next.length > 1) {
+      openIndexes.value = [next[0]];
+      return;
+    }
+    if (next.length !== openIndexes.value.length) {
+      openIndexes.value = next;
+    }
+  },
+  { immediate: true, deep: true }
+);
+watch(
+  () => props.field?.panels,
+  () => {
+    ensureDefaults(collectPanelDefaults(props.field));
+    removeKey(props.fieldKey);
+  },
+  { immediate: true, deep: true }
+);
+function isOpen(index) {
+  return openIndexes.value.includes(index);
+}
+function togglePanel(index) {
+  if (multiExpand.value) {
+    openIndexes.value = isOpen(index) ? openIndexes.value.filter((i) => i !== index) : [...openIndexes.value, index];
+    return;
+  }
+  openIndexes.value = isOpen(index) ? [] : [index];
+}
+function subFieldKey(key) {
+  return `${props.fieldKey}_${key}`;
+}
+function visibleSubFields(subFields) {
+  return Object.entries(subFields).filter(
+    ([, subField]) => isVisible(subField.conditionalLogic, values.value)
+  );
+}
+function updateSubField(key, value) {
+  setValue(key, value);
+}
+</script>
+
+<template>
+  <div :class="rootClass">
+    <div
+      v-if="!panels.length"
+      :class="`${rootClass}__hint`"
+    >
+      No panels defined.
+    </div>
+
+    <template v-else>
+      <div
+        v-for="(panel, index) in panels"
+        :key="`${fieldKey}-panel-${index}`"
+        :class="[`${rootClass}__item`, { 'is-open': isOpen(index) }]"
+      >
+        <button
+          :id="`${fieldKey}-header-${index}`"
+          type="button"
+          :class="`${rootClass}__header`"
+          :aria-expanded="isOpen(index)"
+          :aria-controls="`${fieldKey}-body-${index}`"
+          @click="togglePanel(index)"
+        >
+          <span :class="`${rootClass}__title`">{{ panel.label }}</span>
+          <span
+            :class="`${rootClass}__chevron`"
+            aria-hidden="true"
+          />
+        </button>
+
+        <div
+          v-show="isOpen(index)"
+          :id="`${fieldKey}-body-${index}`"
+          role="region"
+          :aria-labelledby="`${fieldKey}-header-${index}`"
+          :class="`${rootClass}__body`"
+        >
+          <div :class="`${rootClass}__fields`">
+            <div
+              v-for="[subKey, subField] in visibleSubFields(panel.subFields)"
+              :key="subKey"
+              :class="`${rootClass}__field`"
+              :style="subField.columnWidth ? `width: ${subField.columnWidth}%` : void 0"
+            >
+              <component
+                :is="resolveField(subField.type)"
+                :model-value="values[subKey]"
+                :field-key="subFieldKey(subKey)"
+                :field="subField"
+                @update:model-value="updateSubField(subKey, $event)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.katecms-accordion-field {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: 1px solid var(--katecms-color-border);
+  border-radius: var(--katecms-border-radius);
+  background-color: var(--katecms-color-surface);
+  overflow: hidden;
+}
+.katecms-accordion-field__hint {
+  margin: 0;
+  padding: 0.75rem;
+  color: var(--katecms-color-muted);
+}
+.katecms-accordion-field__item {
+  border-bottom: 1px solid var(--katecms-color-border);
+}
+.katecms-accordion-field__item:last-child {
+  border-bottom: 0;
+}
+.katecms-accordion-field__item.is-open .katecms-accordion-field__header {
+  background-color: var(--katecms-color-surface);
+  box-shadow: inset 3px 0 0 var(--katecms-color-accent);
+}
+.katecms-accordion-field__item.is-open .katecms-accordion-field__chevron {
+  transform: rotate(-135deg);
+}
+.katecms-accordion-field__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.75rem 0.875rem;
+  border: 0;
+  background-color: var(--katecms-color-bg);
+  color: var(--katecms-color-ink);
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+.katecms-accordion-field__header:hover {
+  background-color: var(--katecms-color-accent-wash);
+}
+.katecms-accordion-field__header:focus {
+  outline: none;
+}
+.katecms-accordion-field__header:focus-visible {
+  outline: 2px solid rgb(from var(--katecms-color-accent) r g b / 0.35);
+  outline-offset: -2px;
+}
+.katecms-accordion-field__title {
+  min-width: 0;
+}
+.katecms-accordion-field__chevron {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  border-right: 2px solid var(--katecms-color-muted);
+  border-bottom: 2px solid var(--katecms-color-muted);
+  transform: rotate(45deg);
+  transition: transform 0.15s ease;
+}
+.katecms-accordion-field__body {
+  padding: 0.75rem 0.5rem;
+  border-top: 1px solid var(--katecms-color-border);
+}
+.katecms-accordion-field__fields {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem 0;
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
+}
+.katecms-accordion-field__field {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  width: 100%;
+}
+</style>

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

@@ -0,0 +1,109 @@
+<script setup>
+import { computed, onMounted } from "vue";
+import {
+  choiceMapLookup,
+  decodeChoiceValue,
+  encodeChoiceValue
+} from "@katecms/core";
+const props = defineProps({
+  fieldKey: { type: String, required: true },
+  field: { type: Object, required: false, default: () => ({ type: "button_group", label: "", choices: {} }) }
+});
+const model = defineModel({ type: null });
+const rootClass = "katecms-button-group-field";
+const lookup = computed(() => choiceMapLookup(props.field?.choices ?? {}));
+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);
+  }
+});
+function onSelect(value) {
+  selected.value = props.field?.allowNull && selected.value === value ? "" : value;
+}
+onMounted(() => {
+  const raw = selected.value;
+  model.value = raw === "" ? "" : format(raw);
+});
+</script>
+
+<template>
+  <KateCmsFieldWrapper
+    :field-key="fieldKey"
+    :field="field"
+    label-tag="div"
+  >
+    <div
+      :class="[
+  rootClass,
+  `${rootClass}--${field?.layout || 'horizontal'}`
+]"
+    >
+      <button
+        v-for="(label, value) in field?.choices"
+        :key="value"
+        type="button"
+        :class="[`${rootClass}__btn`, { 'is-active': selected === value }]"
+        @click="onSelect(value)"
+      >
+        {{ label }}
+      </button>
+    </div>
+  </KateCmsFieldWrapper>
+</template>
+
+<style scoped>
+.katecms-button-group-field {
+  display: inline-flex;
+}
+.katecms-button-group-field--horizontal .katecms-button-group-field__btn:first-child {
+  border-radius: var(--katecms-border-radius-inter) 0 0 var(--katecms-border-radius-inter);
+}
+.katecms-button-group-field--horizontal .katecms-button-group-field__btn:last-child {
+  border-radius: 0 var(--katecms-border-radius-inter) var(--katecms-border-radius-inter) 0;
+}
+.katecms-button-group-field--vertical {
+  flex-direction: column;
+}
+.katecms-button-group-field--vertical .katecms-button-group-field__btn:not(:first-child) {
+  margin-left: 0;
+  margin-top: -1px;
+}
+.katecms-button-group-field--vertical .katecms-button-group-field__btn:first-child {
+  border-radius: var(--katecms-border-radius-inter) var(--katecms-border-radius-inter) 0 0;
+}
+.katecms-button-group-field--vertical .katecms-button-group-field__btn:last-child {
+  border-radius: 0 0 var(--katecms-border-radius-inter) var(--katecms-border-radius-inter);
+}
+.katecms-button-group-field__btn {
+  padding: 0.625rem 1rem;
+  background-color: var(--katecms-color-surface);
+  border: 1px solid var(--katecms-color-border);
+  color: var(--katecms-color-ink);
+  cursor: pointer;
+  font-size: 0.8125rem;
+}
+.katecms-button-group-field__btn:not(:first-child) {
+  margin-left: -1px;
+}
+.katecms-button-group-field__btn.is-active {
+  background-color: var(--katecms-color-accent);
+  border-color: var(--katecms-color-accent);
+  color: var(--katecms-color-on-accent);
+  position: relative;
+  z-index: 1;
+}
+.katecms-button-group-field__btn:focus {
+  outline: none;
+}
+.katecms-button-group-field__btn:focus-visible {
+  z-index: 2;
+  box-shadow: 0 0 0 2px rgb(from var(--katecms-color-accent) r g b / 0.35);
+}
+</style>

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

@@ -0,0 +1,190 @@
+<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: "checkbox", label: "", choices: {} }) }
+});
+const model = defineModel({ type: null });
+const rootClass = "katecms-checkbox-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 choiceKeys = computed(() => Object.keys(displayChoices.value));
+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() {
+    const value = model.value;
+    const arr = Array.isArray(value) ? value : value == null || value === "" ? [] : [value];
+    return arr.map(unformat);
+  },
+  set(raw) {
+    model.value = raw.map(format);
+  }
+});
+watch(selected, (keys) => {
+  rememberCustom(keys);
+}, { immediate: true });
+const allChecked = computed({
+  get: () => choiceKeys.value.length > 0 && choiceKeys.value.every((key) => selected.value.includes(key)),
+  set: (checked) => {
+    selected.value = checked ? [...choiceKeys.value] : [];
+  }
+});
+const canAddCustom = computed(
+  () => !!props.field?.allowCustomChoices && customDraft.value.trim().length > 0
+);
+const toggleLabel = computed(() => {
+  if (props.field?.allowCustomChoices) {
+    return "Select all";
+  }
+  return props.field?.customChoiceButtonText || "Select all";
+});
+const addLabel = computed(() => props.field?.customChoiceButtonText || "Add");
+function addCustom() {
+  const term = customDraft.value.trim();
+  if (!term || !props.field?.allowCustomChoices) {
+    return;
+  }
+  rememberCustom([term]);
+  if (!selected.value.includes(term)) {
+    selected.value = [...selected.value, term];
+  }
+  customDraft.value = "";
+}
+onMounted(() => {
+  model.value = selected.value.map(format);
+});
+</script>
+
+<template>
+  <KateCmsFieldWrapper
+    :field-key="fieldKey"
+    :field="field"
+  >
+    <div :class="rootClass">
+      <div
+        :class="[
+  `${rootClass}__choices`,
+  `${rootClass}__choices--${field?.layout || 'vertical'}`
+]"
+      >
+        <label
+          v-if="field?.toggle"
+          :class="[`${rootClass}__item`, `${rootClass}__item--toggle`]"
+        >
+          <input
+            v-model="allChecked"
+            type="checkbox"
+          >
+          <span>{{ toggleLabel }}</span>
+        </label>
+
+        <label
+          v-for="(label, value) in displayChoices"
+          :key="value"
+          :class="`${rootClass}__item`"
+        >
+          <input
+            v-model="selected"
+            type="checkbox"
+            :name="`${fieldKey}[]`"
+            :value="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-checkbox-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+.katecms-checkbox-field__choices {
+  display: flex;
+  gap: 0.5rem 1rem;
+}
+.katecms-checkbox-field__choices--vertical {
+  flex-direction: column;
+}
+.katecms-checkbox-field__choices--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.katecms-checkbox-field__item {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  cursor: pointer;
+  color: var(--katecms-color-ink);
+}
+.katecms-checkbox-field__item input {
+  accent-color: var(--katecms-color-accent);
+}
+.katecms-checkbox-field__item--toggle {
+  font-weight: 600;
+  padding-bottom: 0.375rem;
+  border-bottom: 1px solid var(--katecms-color-border);
+}
+.katecms-checkbox-field__add {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.katecms-checkbox-field__add :deep(.katecms-input-control) {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+</style>