katecms 0.0.0-stage → 1.0.0-beta.1

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

@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import {
+  decodeChoiceValue,
+  encodeChoiceValue,
+  imageChoiceLookup,
+} from '@katecms/core'
+import type { Field } from '@katecms/core'
+
+type ImageSelectFieldConfig = Extract<Field, { type: 'image_select' }>
+
+const props = withDefaults(defineProps<{
+  fieldKey: string
+  field?: ImageSelectFieldConfig
+}>(), {
+  field: () => ({ type: 'image_select', label: '', choices: {} }),
+})
+
+const model = defineModel<unknown>()
+
+const rootClass = 'katecms-image-select-field'
+const isMultiple = computed(() => Boolean(props.field?.multiple))
+const imgWidth = computed(() => props.field?.width ?? 140)
+const imgHeight = computed(() => props.field?.height ?? 110)
+const lookup = computed(() => imageChoiceLookup(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 selectedMultiple = computed<string[]>({
+  get() {
+    const value = model.value
+    const arr = Array.isArray(value)
+      ? value
+      : value == null || value === ''
+        ? []
+        : [value]
+    return arr.map(unformat).filter(Boolean)
+  },
+  set(raw) {
+    model.value = raw.map(format)
+  },
+})
+
+const selectedSingle = computed<string>({
+  get: () => unformat(model.value),
+  set: (raw) => {
+    model.value = raw === '' ? '' : format(raw)
+  },
+})
+
+function isSelected(value: string): boolean {
+  return isMultiple.value
+    ? selectedMultiple.value.includes(value)
+    : selectedSingle.value === value
+}
+
+function onRadioClick(value: string) {
+  if (props.field?.allowNull && selectedSingle.value === value) {
+    selectedSingle.value = ''
+  }
+}
+
+onMounted(() => {
+  if (isMultiple.value) {
+    model.value = selectedMultiple.value.map(format)
+    return
+  }
+  const raw = selectedSingle.value
+  model.value = raw === '' ? '' : format(raw)
+})
+</script>
+
+<template>
+  <KateCmsFieldWrapper
+    :field-key="fieldKey"
+    :field="field"
+  >
+    <div
+      :class="[
+        rootClass,
+        `${rootClass}--${field?.layout || 'horizontal'}`,
+      ]"
+    >
+      <label
+        v-for="(choice, value) in field?.choices"
+        :key="value"
+        :class="[
+          `${rootClass}__item`,
+          { 'is-selected': isSelected(value) },
+        ]"
+      >
+        <input
+          v-if="isMultiple"
+          v-model="selectedMultiple"
+          type="checkbox"
+          :name="`${fieldKey}[]`"
+          :value="value"
+          :class="`${rootClass}__input`"
+        >
+        <input
+          v-else
+          v-model="selectedSingle"
+          type="radio"
+          :name="fieldKey"
+          :value="value"
+          :class="`${rootClass}__input`"
+          @click="onRadioClick(value)"
+        >
+        <span
+          :class="`${rootClass}__media`"
+          :style="{
+            width: `${imgWidth}px`,
+            height: `${imgHeight}px`,
+          }"
+        >
+          <img
+            :src="choice.image"
+            :alt="choice.label"
+            loading="lazy"
+          >
+        </span>
+        <span :class="`${rootClass}__label`">{{ choice.label }}</span>
+      </label>
+    </div>
+  </KateCmsFieldWrapper>
+</template>
+
+<style scoped lang="scss">
+@use "../../assets/styles" as *;
+
+$root: '.katecms-image-select-field';
+
+#{$root} {
+  display: flex;
+  gap: math-rem(12);
+  flex-wrap: wrap;
+
+  &--vertical {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  &--horizontal {
+    flex-direction: row;
+  }
+
+  &__item {
+    flex: 0 0 auto;
+    width: auto;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border: 2px solid $color-border;
+    border-radius: $border-radius;
+    background: $color-surface;
+    cursor: pointer;
+    transition: border-color .15s ease, box-shadow .15s ease;
+
+    &:hover {
+      border-color: $color-accent-hover;
+    }
+
+    &.is-selected {
+      border-color: $color-accent;
+      box-shadow: 0 0 0 1px $color-accent;
+    }
+  }
+
+  &__input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    margin: 0 !important;
+  }
+
+  &__media {
+    min-height: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: $color-bg;
+    overflow: hidden;
+
+    img {
+      display: block;
+      width: 100%;
+      height: 100% !important;
+      object-fit: contain;
+    }
+  }
+
+  &__label {
+    flex: 0 0 auto;
+    padding: math-rem(5) math-rem(8);
+    text-align: center;
+    font-size: math-rem(12);
+    line-height: 1.2;
+    color: $color-ink;
+    background: $color-surface;
+    border-top: 1px solid $color-border;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+</style>

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

@@ -0,0 +1,338 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { isLinkValue } from '@katecms/core'
+import type { Field, LinkValue } from '@katecms/core'
+
+type LinkFieldConfig = Extract<Field, { type: 'link' }>
+
+const props = withDefaults(defineProps<{
+  fieldKey: string
+  field?: LinkFieldConfig
+}>(), {
+  field: () => ({ type: 'link', label: '' }),
+})
+
+const model = defineModel<unknown>()
+
+const rootClass = 'katecms-link-field'
+const isUrlOnly = computed(() => props.field?.returnFormat === 'url')
+
+const urlField = {
+  type: 'url' as const,
+  label: 'URL',
+  placeholder: 'https://example.com',
+}
+const titleField = {
+  type: 'text' as const,
+  label: 'Link text',
+}
+const targetField = {
+  type: 'true_false' as const,
+  message: 'Open in a new tab',
+  ui: true,
+}
+
+const current = computed<LinkValue | null>(() => {
+  const value = model.value
+  if (!value) {
+    return null
+  }
+  if (typeof value === 'string') {
+    return value ? { url: value, title: '', target: '' } : null
+  }
+  if (!isLinkValue(value) || !value.url) {
+    return null
+  }
+  return { url: value.url, title: value.title ?? '', target: value.target ?? '' }
+})
+
+const editing = ref(false)
+const url = ref('')
+const title = ref('')
+const newTab = ref(false)
+
+function openEditor() {
+  url.value = current.value?.url ?? ''
+  title.value = current.value?.title ?? ''
+  newTab.value = current.value?.target === '_blank'
+  editing.value = true
+}
+
+function save() {
+  const link = url.value.trim()
+  if (!link) {
+    editing.value = false
+    return
+  }
+  model.value = isUrlOnly.value
+    ? link
+    : { url: link, title: title.value.trim(), target: newTab.value ? '_blank' : '' }
+  editing.value = false
+}
+
+function remove() {
+  model.value = isUrlOnly.value ? '' : null
+  editing.value = false
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    editing.value = false
+  }
+}
+
+watch(editing, (open) => {
+  if (typeof window === 'undefined') {
+    return
+  }
+  if (open) {
+    window.addEventListener('keydown', onKeydown)
+  }
+  else {
+    window.removeEventListener('keydown', onKeydown)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('keydown', onKeydown)
+  }
+})
+</script>
+
+<template>
+  <KateCmsFieldWrapper
+    :field-key="fieldKey"
+    :field="field"
+    label-tag="div"
+  >
+    <div :class="rootClass">
+      <div :class="`${rootClass}__control`">
+        <div
+          v-if="current"
+          :class="`${rootClass}__chip`"
+        >
+          <span :class="`${rootClass}__chip-text`">
+            <span
+              v-if="current.title"
+              :class="`${rootClass}__chip-title`"
+            >{{ current.title }}</span>
+            <a
+              :href="current.url"
+              :target="current.target || undefined"
+              rel="noopener noreferrer"
+            >{{ current.url }}</a>
+          </span>
+          <KateCmsUiButton
+            tag="button"
+            :variant="['secondary', 'small', 'icon']"
+            aria-label="Change"
+            title="Change"
+            @click="openEditor"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 640 640"
+              fill="currentColor"
+            >
+              <path
+                d="M505 122.9L517.1 135C526.5 144.4 526.5 159.6 517.1 168.9L488 198.1L441.9 152L471 122.9C480.4 113.5 495.6 113.5 504.9 122.9zM273.8 320.2L408 185.9L454.1 232L319.8 366.2C316.9 369.1 313.3 371.2 309.4 372.3L250.9 389L267.6 330.5C268.7 326.6 270.8 323 273.7 320.1zM437.1 89L239.8 286.2C231.1 294.9 224.8 305.6 221.5 317.3L192.9 417.3C190.5 425.7 192.8 434.7 199 440.9C205.2 447.1 214.2 449.4 222.6 447L322.6 418.4C334.4 415 345.1 408.7 353.7 400.1L551 202.9C579.1 174.8 579.1 129.2 551 101.1L538.9 89C510.8 60.9 465.2 60.9 437.1 89zM152 128C103.4 128 64 167.4 64 216L64 488C64 536.6 103.4 576 152 576L424 576C472.6 576 512 536.6 512 488L512 376C512 362.7 501.3 352 488 352C474.7 352 464 362.7 464 376L464 488C464 510.1 446.1 528 424 528L152 528C129.9 528 112 510.1 112 488L112 216C112 193.9 129.9 176 152 176L264 176C277.3 176 288 165.3 288 152C288 138.7 277.3 128 264 128L152 128z"
+              />
+            </svg>
+          </KateCmsUiButton>
+          <KateCmsUiButton
+            tag="button"
+            :variant="['red', 'small', 'icon']"
+            aria-label="Remove"
+            title="Remove"
+            @click="remove"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 640 640"
+              fill="currentColor"
+            >
+              <path
+                d="M183.1 137.4C170.6 124.9 150.3 124.9 137.8 137.4C125.3 149.9 125.3 170.2 137.8 182.7L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7L320.5 365.3L457.9 502.6C470.4 515.1 490.7 515.1 503.2 502.6C515.7 490.1 515.7 469.8 503.2 457.3L365.8 320L503.1 182.6C515.6 170.1 515.6 149.8 503.1 137.3C490.6 124.8 470.3 124.8 457.8 137.3L320.5 274.7L183.1 137.4z"
+              />
+            </svg>
+          </KateCmsUiButton>
+        </div>
+
+        <KateCmsUiButton
+          v-else
+          tag="button"
+          @click="openEditor"
+        >
+          Select link
+        </KateCmsUiButton>
+      </div>
+
+      <Teleport to="body">
+        <div
+          v-if="editing"
+          :class="`${rootClass}__overlay`"
+          @click.self="editing = false"
+        >
+          <div
+            :class="`${rootClass}__modal`"
+            role="dialog"
+            aria-modal="true"
+            :aria-labelledby="`${fieldKey}-link-title`"
+          >
+            <div :class="`${rootClass}__modal-header`">
+              <div
+                :id="`${fieldKey}-link-title`"
+                :class="`${rootClass}__modal-title`"
+              >
+                Insert / edit link
+              </div>
+              <KateCmsUiButton
+                tag="button"
+                :variant="['tertiary', 'small', 'icon']"
+                aria-label="Close"
+                @click="editing = false"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 640 640"
+                  fill="currentColor"
+                >
+                  <path
+                    d="M183.1 137.4C170.6 124.9 150.3 124.9 137.8 137.4C125.3 149.9 125.3 170.2 137.8 182.7L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7L320.5 365.3L457.9 502.6C470.4 515.1 490.7 515.1 503.2 502.6C515.7 490.1 515.7 469.8 503.2 457.3L365.8 320L503.1 182.6C515.6 170.1 515.6 149.8 503.1 137.3C490.6 124.8 470.3 124.8 457.8 137.3L320.5 274.7L183.1 137.4z"
+                  />
+                </svg>
+              </KateCmsUiButton>
+            </div>
+
+            <div :class="`${rootClass}__modal-body`">
+              <KateCmsUrlField
+                v-model="url"
+                :field-key="`${fieldKey}-url`"
+                :field="urlField"
+              />
+
+              <KateCmsTextField
+                v-if="!isUrlOnly"
+                v-model="title"
+                :field-key="`${fieldKey}-title`"
+                :field="titleField"
+              />
+
+              <KateCmsTrueFalseField
+                v-if="!isUrlOnly"
+                v-model="newTab"
+                :field-key="`${fieldKey}-target`"
+                :field="targetField"
+              />
+            </div>
+
+            <div :class="`${rootClass}__modal-footer`">
+              <KateCmsUiButton
+                tag="button"
+                :variant="['secondary', 'small']"
+                @click="editing = false"
+              >
+                Cancel
+              </KateCmsUiButton>
+              <KateCmsUiButton
+                tag="button"
+                variant="small"
+                @click="save"
+              >
+                Add link
+              </KateCmsUiButton>
+            </div>
+          </div>
+        </div>
+      </Teleport>
+    </div>
+  </KateCmsFieldWrapper>
+</template>
+
+<style scoped lang="scss">
+@use "../../assets/styles" as *;
+
+$root: '.katecms-link-field';
+
+#{$root} {
+  &__overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: math-rem(60) math-rem(16);
+    background-color: $color-overlay;
+  }
+
+  &__modal {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 480px;
+    max-height: calc(100vh - 120px);
+    background-color: $color-surface;
+    border-radius: $border-radius;
+    box-shadow: $shadow-md;
+    overflow: hidden;
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: math-rem(14) math-rem(18);
+      border-bottom: 1px solid $color-border;
+    }
+
+    &-title {
+      margin: 0;
+      font-size: math-rem(16);
+      color: $color-ink;
+    }
+
+    &-body {
+      display: flex;
+      flex-direction: column;
+      gap: math-rem(12);
+      padding: math-rem(18);
+      overflow-y: auto;
+    }
+
+    &-footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: math-rem(8);
+      padding: math-rem(14) math-rem(18);
+      border-top: 1px solid $color-border;
+    }
+  }
+
+  &__chip {
+    display: inline-flex;
+    align-items: center;
+    gap: math-rem(10);
+    padding: math-rem(4) math-rem(4) math-rem(4) math-rem(10);
+    border: 1px solid $color-border;
+    border-radius: $border-radius;
+    background-color: $color-surface;
+
+    &-text {
+      display: inline-flex;
+      align-items: center;
+      gap: math-rem(8);
+      color: $color-ink;
+
+      a {
+        color: $color-accent;
+        text-decoration: underline;
+      }
+    }
+
+    &-title {
+      font-weight: 700;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { Field } from '@katecms/core'
+
+type NumberFieldConfig = Extract<Field, { type: 'number' }>
+
+withDefaults(defineProps<{
+  fieldKey: string
+  field?: NumberFieldConfig
+}>(), {
+  field: () => ({ type: 'number', label: '' }),
+})
+
+const model = defineModel<number | null>()
+</script>
+
+<template>
+  <KateCmsFieldWrapper
+    :field-key="fieldKey"
+    :field="field"
+  >
+    <KateCmsInputControl
+      v-model="model"
+      type="number"
+      numeric
+      :field-key="fieldKey"
+      :field="field"
+      :min="field?.min ?? undefined"
+      :max="field?.max ?? undefined"
+      :step="field?.step ?? undefined"
+    />
+  </KateCmsFieldWrapper>
+</template>