katecms 0.0.0-stage → 1.0.0-beta.1

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

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import {
+  decodeChoiceValue,
+  encodeChoiceValue,
+  selectChoiceLookup,
+  walkSelectChoices,
+} from '@katecms/core'
+import type { Field, SelectChoiceValue } from '@katecms/core'
+
+type SelectFieldConfig = Extract<Field, { type: 'select' }>
+
+const props = withDefaults(defineProps<{
+  fieldKey: string
+  field?: SelectFieldConfig
+}>(), {
+  field: () => ({ type: 'select', label: '', choices: [] }),
+})
+
+const model = defineModel<unknown>()
+const lookup = computed(() => selectChoiceLookup(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)
+}
+
+function formattedFromSelected(): unknown {
+  const raw = selected.value
+  if (props.field?.multiple) {
+    return Array.isArray(raw) ? raw.map(v => format(String(v))) : []
+  }
+  return raw === '' ? '' : format(String(raw))
+}
+
+function sameSelectModel(a: unknown, b: unknown): boolean {
+  if (Array.isArray(a) || Array.isArray(b)) {
+    const left = Array.isArray(a) ? a : []
+    const right = Array.isArray(b) ? b : []
+    return left.length === right.length && left.every((item, i) => String(item) === String(right[i]))
+  }
+  if ((a == null || a === '') && (b == null || b === '')) {
+    return true
+  }
+  return String(a ?? '') === String(b ?? '')
+}
+
+const selected = computed<SelectChoiceValue | SelectChoiceValue[] | ''>({
+  get() {
+    if (props.field?.multiple) {
+      return Array.isArray(model.value) ? model.value.map(unformat) : []
+    }
+    return unformat(model.value)
+  },
+  set(raw) {
+    if (props.field?.multiple) {
+      model.value = Array.isArray(raw) ? raw.map(v => format(String(v))) : []
+    }
+    else {
+      model.value = raw === '' ? '' : format(String(raw))
+    }
+  },
+})
+
+const selectChoices = computed(() => props.field?.choices ?? [])
+
+const placeholder = computed(() => {
+  if (props.field?.placeholder) return props.field.placeholder
+  if (props.field?.allowNull && !props.field?.multiple) return '— Select —'
+  return ''
+})
+
+const showOptionImages = computed(() => {
+  let hasImg = false
+  walkSelectChoices(selectChoices.value, (opt) => {
+    if (opt.img) hasImg = true
+  })
+  return hasImg
+})
+
+onMounted(() => {
+  const next = formattedFromSelected()
+  if (!sameSelectModel(model.value, next)) {
+    model.value = next
+  }
+})
+</script>
+
+<template>
+  <KateCmsFieldWrapper
+    :field-key="fieldKey"
+    :field="field"
+  >
+    <KateCmsUiSelect
+      :id="fieldKey"
+      v-model="selected"
+      :name="fieldKey"
+      :choices="selectChoices"
+      :placeholder="placeholder"
+      :multiple="field?.multiple || false"
+      :required="field?.required || false"
+      :min="field?.min"
+      :max="field?.max"
+      :search="field?.search || false"
+      :search-clearable="!!field?.search"
+      :search-placeholder="field?.searchPlaceholder || ''"
+      :allow-custom-choices="field?.allowCustomChoices || false"
+      :add-option-text="field?.customChoiceButtonText || 'Add'"
+      :selected-opt-clearable="field?.clearable || !!field?.allowNull"
+      :selected-opt-image="showOptionImages"
+      :option-icon="showOptionImages"
+      :aria-label="field?.label || fieldKey"
+    />
+  </KateCmsFieldWrapper>
+</template>

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

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import type { Field } from '@katecms/core'
+
+type SeparatorFieldConfig = Extract<Field, { type: 'separator' }>
+
+withDefaults(defineProps<{
+  fieldKey: string
+  field?: SeparatorFieldConfig
+}>(), {
+  field: () => ({ type: 'separator' }),
+})
+
+const rootClass = 'katecms-separator-field'
+</script>
+
+<template>
+  <div
+    :class="rootClass"
+    role="separator"
+    :aria-label="field?.label || undefined"
+  >
+    <template v-if="field?.label">
+      <span
+        :class="`${rootClass}__line`"
+        aria-hidden="true"
+      />
+      <span :class="`${rootClass}__label`">{{ field.label }}</span>
+      <span
+        :class="`${rootClass}__line`"
+        aria-hidden="true"
+      />
+    </template>
+    <span
+      v-else
+      :class="`${rootClass}__hr`"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use "../../assets/styles" as *;
+
+$root: '.katecms-separator-field';
+
+#{$root} {
+  display: flex;
+  align-items: center;
+  gap: math-rem(12);
+  width: 100%;
+  margin: math-rem(10) 0;
+
+  &__label {
+    flex-shrink: 0;
+    font-size: math-rem(17);
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: $color-ink;
+    white-space: nowrap;
+  }
+
+  &__line {
+    flex: 1 1 auto;
+    height: 4px;
+    background-color: $color-accent;
+  }
+
+  &__hr {
+    display: block;
+    flex: 1 1 auto;
+    width: 100%;
+    height: 4px;
+    margin: 0;
+    background-color: $color-accent;
+  }
+}
+</style>

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

@@ -0,0 +1,249 @@
+<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 TabFieldConfig = Extract<Field, { type: 'tab' }>
+
+const props = withDefaults(defineProps<{
+  fieldKey: string
+  field?: TabFieldConfig
+}>(), {
+  field: () => ({ type: 'tab', panels: [] }),
+})
+
+defineModel<unknown>()
+
+const rootClass = 'katecms-tab-field'
+const activeIndex = ref(0)
+const { getValues, setValue, ensureDefaults, removeKey } = useKateCmsFieldValues()
+
+const panels = computed(() => props.field?.panels ?? [])
+const placement = computed(() => props.field?.placement === 'left' ? 'left' : 'top')
+const values = computed(() => getValues())
+
+watch(
+  panels,
+  (list) => {
+    if (!list.length) {
+      activeIndex.value = 0
+      return
+    }
+    if (activeIndex.value >= list.length) {
+      activeIndex.value = 0
+    }
+  },
+  { deep: true },
+)
+
+watch(
+  () => props.field?.panels,
+  () => {
+    ensureDefaults(collectPanelDefaults(props.field))
+    removeKey(props.fieldKey)
+  },
+  { immediate: true, deep: true },
+)
+
+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)
+}
+
+function selectTab(index: number) {
+  activeIndex.value = index
+}
+</script>
+
+<template>
+  <div
+    :class="[rootClass, `${rootClass}--${placement}`]"
+  >
+    <div
+      v-if="!panels.length"
+      :class="`${rootClass}__hint`"
+    >
+      No tabs defined.
+    </div>
+
+    <template v-else>
+      <div
+        :class="`${rootClass}__nav`"
+        role="tablist"
+        :aria-orientation="placement === 'left' ? 'vertical' : 'horizontal'"
+      >
+        <button
+          v-for="(tab, index) in panels"
+          :id="`${fieldKey}-tab-${index}`"
+          :key="`${fieldKey}-tab-${index}`"
+          type="button"
+          role="tab"
+          :aria-selected="activeIndex === index"
+          :aria-controls="`${fieldKey}-panel-${index}`"
+          :tabindex="activeIndex === index ? 0 : -1"
+          :class="[`${rootClass}__tab`, { 'is-active': activeIndex === index }]"
+          @click="selectTab(index)"
+        >
+          {{ tab.label }}
+        </button>
+      </div>
+
+      <div
+        v-for="(tab, index) in panels"
+        v-show="activeIndex === index"
+        :id="`${fieldKey}-panel-${index}`"
+        :key="`${fieldKey}-panel-${index}`"
+        role="tabpanel"
+        :aria-labelledby="`${fieldKey}-tab-${index}`"
+        :class="`${rootClass}__panel`"
+      >
+        <div :class="`${rootClass}__fields`">
+          <div
+            v-for="[subKey, subField] in visibleSubFields(tab.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>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use "../../assets/styles" as *;
+
+$root: '.katecms-tab-field';
+
+#{$root} {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: 1px solid $color-border;
+  border-radius: $border-radius;
+  background-color: $color-surface;
+  overflow: hidden;
+
+  &--left {
+    flex-direction: row;
+    align-items: stretch;
+  }
+
+  &__hint {
+    margin: 0;
+    padding: math-rem(12);
+    color: $color-muted;
+  }
+
+  &__nav {
+    display: flex;
+    flex-shrink: 0;
+    background-color: $color-bg;
+    border-bottom: 1px solid $color-border;
+  }
+  &--left {
+    #{$root}__nav {
+      flex-direction: column;
+      width: math-rem(160);
+      border-bottom: 0;
+      border-right: 1px solid $color-border;
+    }
+  }
+
+  &__tab {
+    padding: math-rem(10) math-rem(14);
+    border: 0;
+    border-right: 1px solid $color-border;
+    background: transparent;
+    color: $color-muted;
+    font: inherit;
+    font-size: math-rem(13);
+    font-weight: 500;
+    text-align: left;
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease;
+
+    &:last-child {
+      border-right: 0;
+    }
+
+    &:hover {
+      color: $color-ink;
+      background-color: $color-accent-wash;
+    }
+
+    &.is-active {
+      color: $color-ink;
+      font-weight: 600;
+      background-color: $color-surface;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: 2px solid color-alpha($color-accent, 0.35);
+      outline-offset: -2px;
+    }
+  }
+  &--left {
+    #{$root}__tab {
+      border-right: 0;
+      border-bottom: 1px solid $color-border;
+
+      &:last-child {
+        border-bottom: 0;
+      }
+
+      &.is-active {
+        box-shadow: inset 2px 0 0 $color-accent;
+      }
+    }
+  }
+  &--top {
+    #{$root}__tab.is-active {
+      box-shadow: inset 0 -2px 0 $color-accent;
+    }
+  }
+
+  &__panel {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: math-rem(12) math-rem(8);
+  }
+
+  &__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/TextField.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { Field } from '@katecms/core'
+
+type TextFieldConfig = Extract<Field, { type: 'text' }>
+
+withDefaults(defineProps<{
+  fieldKey: string
+  field?: TextFieldConfig
+}>(), {
+  field: () => ({ type: 'text', label: '' }),
+})
+
+const model = defineModel<string>()
+</script>
+
+<template>
+  <KateCmsFieldWrapper
+    :field-key="fieldKey"
+    :field="field"
+  >
+    <KateCmsInputControl
+      v-model="model"
+      type="text"
+      :field-key="fieldKey"
+      :field="field"
+      :maxlength="field?.maxLength || undefined"
+    />
+  </KateCmsFieldWrapper>
+</template>

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

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { Field } from '@katecms/core'
+
+type TextareaFieldConfig = Extract<Field, { type: 'textarea' }>
+
+withDefaults(defineProps<{
+  fieldKey: string
+  field?: TextareaFieldConfig
+}>(), {
+  field: () => ({ type: 'textarea', label: '' }),
+})
+
+const model = defineModel<string>()
+
+const rootClass = 'katecms-textarea-field'
+</script>
+
+<template>
+  <KateCmsFieldWrapper
+    :field-key="fieldKey"
+    :field="field"
+  >
+    <textarea
+      :id="fieldKey"
+      v-model="model"
+      :class="rootClass"
+      :name="fieldKey"
+      :rows="field?.rows ?? 8"
+      :placeholder="field?.placeholder || undefined"
+      :required="!!field?.required"
+      :maxlength="field?.maxLength || undefined"
+    />
+  </KateCmsFieldWrapper>
+</template>
+
+<style scoped lang="scss">
+@use "../../assets/styles" as *;
+
+$root: '.katecms-textarea-field';
+
+#{$root} {
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: math-rem(10);
+  border: 1px solid $color-border;
+  border-radius: $border-radius;
+  background-color: $color-surface;
+  color: $color-ink;
+  font-size: math-rem(14);
+  line-height: 1.5;
+  resize: vertical;
+
+  @include placeholder($color-muted);
+
+  &:focus {
+    outline: none;
+    border-color: $color-accent;
+  }
+}
+</style>

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

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { Field } from '@katecms/core'
+
+type TimePickerFieldConfig = Extract<Field, { type: 'time_picker' }>
+
+withDefaults(defineProps<{
+  fieldKey: string
+  field?: TimePickerFieldConfig
+}>(), {
+  field: () => ({ type: 'time_picker', label: '' }),
+})
+
+const model = defineModel<string>()
+</script>
+
+<template>
+  <KateCmsFieldWrapper
+    :field-key="fieldKey"
+    :field="field"
+  >
+    <KateCmsDateTimeControl
+      :id="fieldKey"
+      v-model="model"
+      mode="time"
+      :name="fieldKey"
+      :required="!!field?.required"
+      :display-format="field?.displayFormat"
+      :return-format="field?.returnFormat"
+    />
+  </KateCmsFieldWrapper>
+</template>