katecms 0.0.0-stage → 1.0.0-beta.1

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

@@ -0,0 +1,258 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { collectPanelDefaults, isVisible } from '@katecms/core'
+import type { Field } from '@katecms/core'
+import { resolveField } from '../../utils/helpers'
+import { useKateCmsFieldValues } from '../../utils/field-values'
+
+type AccordionFieldConfig = Extract<Field, { type: 'accordion' }>
+
+const props = withDefaults(defineProps<{
+  fieldKey: string
+  field?: AccordionFieldConfig
+}>(), {
+  field: () => ({ type: 'accordion', panels: [] }),
+})
+
+defineModel<unknown>()
+
+const rootClass = 'katecms-accordion-field'
+const openIndexes = ref<number[]>([])
+const { getValues, setValue, ensureDefaults, removeKey } = useKateCmsFieldValues()
+
+const panels = computed(() => props.field?.panels ?? [])
+const multiExpand = computed(() => !!props.field?.multiExpand)
+const values = computed(() => getValues())
+
+function resolveInitialOpen(): number[] {
+  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: number): boolean {
+  return openIndexes.value.includes(index)
+}
+
+function togglePanel(index: number) {
+  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: string): string {
+  return `${props.fieldKey}_${key}`
+}
+
+function visibleSubFields(subFields: Record<string, Field>) {
+  return Object.entries(subFields).filter(([, subField]) =>
+    isVisible(subField.conditionalLogic, values.value),
+  )
+}
+
+function updateSubField(key: string, value: unknown) {
+  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}%` : undefined"
+            >
+              <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 lang="scss">
+@use "../../assets/styles" as *;
+
+$root: '.katecms-accordion-field';
+
+#{$root} {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: 1px solid $color-border;
+  border-radius: $border-radius;
+  background-color: $color-surface;
+  overflow: hidden;
+
+  &__hint {
+    margin: 0;
+    padding: math-rem(12);
+    color: $color-muted;
+  }
+
+  &__item {
+    border-bottom: 1px solid $color-border;
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    &.is-open #{$root}__header {
+      background-color: $color-surface;
+      box-shadow: inset 3px 0 0 $color-accent;
+    }
+
+    &.is-open #{$root}__chevron {
+      transform: rotate(-135deg);
+    }
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: math-rem(12);
+    width: 100%;
+    padding: math-rem(12) math-rem(14);
+    border: 0;
+    background-color: $color-bg;
+    color: $color-ink;
+    font: inherit;
+    font-size: math-rem(13);
+    font-weight: 600;
+    text-align: left;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: $color-accent-wash;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: 2px solid color-alpha($color-accent, 0.35);
+      outline-offset: -2px;
+    }
+  }
+
+  &__title {
+    min-width: 0;
+  }
+
+  &__chevron {
+    flex-shrink: 0;
+    width: 8px;
+    height: 8px;
+    border-right: 2px solid $color-muted;
+    border-bottom: 2px solid $color-muted;
+    transform: rotate(45deg);
+    transition: transform 0.15s ease;
+  }
+
+  &__body {
+    padding: math-rem(12) math-rem(8);
+    border-top: 1px solid $color-border;
+  }
+
+  &__fields {
+    display: flex;
+    flex-wrap: wrap;
+    gap: math-rem(16) 0;
+    margin-left: math-rem(-8);
+    margin-right: math-rem(-8);
+  }
+
+  &__field {
+    padding-left: math-rem(8);
+    padding-right: math-rem(8);
+    width: 100%;
+  }
+}
+</style>

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

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import {
+  choiceMapLookup,
+  decodeChoiceValue,
+  encodeChoiceValue,
+} from '@katecms/core'
+import type { Field } from '@katecms/core'
+
+type ButtonGroupFieldConfig = Extract<Field, { type: 'button_group' }>
+
+const props = withDefaults(defineProps<{
+  fieldKey: string
+  field?: ButtonGroupFieldConfig
+}>(), {
+  field: () => ({ type: 'button_group', label: '', choices: {} }),
+})
+
+const model = defineModel<unknown>()
+
+const rootClass = 'katecms-button-group-field'
+const lookup = computed(() => choiceMapLookup(props.field?.choices ?? {}))
+
+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)
+  },
+})
+
+function onSelect(value: string) {
+  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 lang="scss">
+@use "../../assets/styles" as *;
+
+$root: '.katecms-button-group-field';
+
+#{$root} {
+  display: inline-flex;
+
+  &--horizontal {
+    #{$root} {
+      &__btn {
+        &:first-child {
+          border-radius: $border-radius-inter 0 0 $border-radius-inter;
+        }
+        &:last-child {
+          border-radius: 0 $border-radius-inter $border-radius-inter 0;
+        }
+      }
+    }
+  }
+
+  &--vertical {
+    flex-direction: column;
+
+    #{$root} {
+      &__btn {
+        &:not(:first-child) {
+          margin-left: 0;
+          margin-top: -1px;
+        }
+        &:first-child {
+          border-radius: $border-radius-inter $border-radius-inter 0 0;
+        }
+        &:last-child {
+          border-radius: 0 0 $border-radius-inter $border-radius-inter;
+        }
+      }
+    }
+  }
+
+  &__btn {
+    padding: math-rem(10) math-rem(16);
+    background-color: $color-surface;
+    border: 1px solid $color-border;
+    color: $color-ink;
+    cursor: pointer;
+    font-size: math-rem(13);
+
+    &:not(:first-child) {
+      margin-left: -1px;
+    }
+
+    &.is-active {
+      background-color: $color-accent;
+      border-color: $color-accent;
+      color: $color-on-accent;
+      position: relative;
+      z-index: 1;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      z-index: 2;
+      box-shadow: 0 0 0 2px color-alpha($color-accent, 0.35);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,228 @@
+<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 CheckboxFieldConfig = Extract<Field, { type: 'checkbox' }>
+
+const props = withDefaults(defineProps<{
+  fieldKey: string
+  field?: CheckboxFieldConfig
+}>(), {
+  field: () => ({ type: 'checkbox', label: '', choices: {} }),
+})
+
+const model = defineModel<unknown>()
+
+const rootClass = 'katecms-checkbox-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 choiceKeys = computed(() => Object.keys(displayChoices.value))
+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() {
+    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<boolean>({
+  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 lang="scss">
+@use "../../assets/styles" as *;
+
+$root: '.katecms-checkbox-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;
+    }
+
+    &--toggle {
+      font-weight: 600;
+      padding-bottom: math-rem(6);
+      border-bottom: 1px solid $color-border;
+    }
+  }
+
+  &__add {
+    display: flex;
+    align-items: center;
+    gap: math-rem(8);
+
+    :deep(.katecms-input-control) {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+  }
+}
+</style>