katecms 0.0.0-stage → 1.0.0-beta.1

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

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import type { Field } from '@katecms/core'
+
+type TrueFalseFieldConfig = Extract<Field, { type: 'true_false' }>
+
+withDefaults(defineProps<{
+  fieldKey: string
+  field?: TrueFalseFieldConfig
+}>(), {
+  field: () => ({ type: 'true_false', label: '' }),
+})
+
+const model = defineModel<boolean>()
+
+const rootClass = 'katecms-true-false-field'
+</script>
+
+<template>
+  <KateCmsFieldWrapper
+    :field-key="fieldKey"
+    :field="field"
+  >
+    <div :class="rootClass">
+      <button
+        v-if="field?.ui"
+        :id="fieldKey"
+        type="button"
+        role="switch"
+        :aria-checked="!!model"
+        :class="[`${rootClass}__switch`, { 'is-on': model }]"
+        @click="model = !model"
+      >
+        <span :class="`${rootClass}__on`">{{ field?.uiOnText || 'Yes' }}</span>
+        <span :class="`${rootClass}__off`">{{ field?.uiOffText || 'No' }}</span>
+        <span :class="`${rootClass}__slider`" />
+      </button>
+
+      <button
+        v-else
+        :id="fieldKey"
+        type="button"
+        role="checkbox"
+        :aria-checked="!!model"
+        :class="[`${rootClass}__checkbox`, { 'is-on': model }]"
+        @click="model = !model"
+      />
+
+      <label
+        v-if="field?.message"
+        :for="fieldKey"
+        :class="`${rootClass}__message`"
+      >
+        {{ field.message }}
+      </label>
+    </div>
+  </KateCmsFieldWrapper>
+</template>
+
+<style scoped lang="scss">
+@use "../../assets/styles" as *;
+
+$root: '.katecms-true-false-field';
+
+#{$root} {
+  display: inline-flex;
+  align-items: center;
+  gap: math-rem(10);
+
+  &__switch {
+    position: relative;
+    display: inline-flex;
+    align-items: stretch;
+    height: math-rem(38);
+    padding: 0;
+    border: 1px solid $color-border;
+    border-radius: $border-radius-inter;
+    background-color: $color-surface;
+    cursor: pointer;
+    user-select: none;
+    overflow: hidden;
+    transition: background-color .3s, border-color .3s;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 2px color-alpha($color-accent, 0.35);
+    }
+
+    &.is-on {
+      background-color: $color-accent;
+      border-color: $color-accent;
+
+      #{$root} {
+        &__slider {
+          left: calc(50% + 2px);
+        }
+        &__on,
+        &__off {
+          color: $color-on-accent;
+        }
+      }
+    }
+  }
+
+  &__on,
+  &__off {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    font-size: math-rem(13);
+    color: $color-accent;
+    z-index: 1;
+    transition: color .3s;
+  }
+
+  &__slider {
+    position: absolute;
+    top: 2px;
+    bottom: 2px;
+    left: 2px;
+    width: calc(50% - 4px);
+    background-color: $color-on-accent;
+    border: 1px solid $color-border;
+    border-radius: $border-radius-inter;
+    transition: left 0.3s ease;
+    z-index: 2;
+  }
+
+  &__checkbox {
+    width: math-rem(44);
+    height: math-rem(23);
+    border-radius: math-rem(20);
+    background-color: $color-muted;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    cursor: pointer;
+    user-select: none;
+    overflow: hidden;
+    position: relative;
+    transition: background-color .3s;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 2px color-alpha($color-accent, 0.35);
+    }
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: math-rem(19);
+      height: math-rem(19);
+      border-radius: 50%;
+      transition: left .3s;
+      background-color: $color-on-accent;
+    }
+
+    &.is-on {
+      background-color: $color-accent;
+
+      &:before {
+        left: 23px;
+      }
+    }
+  }
+
+  &__message {
+    user-select: none;
+    color: $color-ink;
+    cursor: pointer;
+  }
+}
+</style>

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { Field } from '@katecms/core'
+
+type UrlFieldConfig = Extract<Field, { type: 'url' }>
+
+withDefaults(defineProps<{
+  fieldKey: string
+  field?: UrlFieldConfig
+}>(), {
+  field: () => ({ type: 'url', label: '' }),
+})
+
+const model = defineModel<string>()
+</script>
+
+<template>
+  <KateCmsFieldWrapper
+    :field-key="fieldKey"
+    :field="field"
+  >
+    <KateCmsInputControl
+      v-model="model"
+      type="url"
+      :field-key="fieldKey"
+      :field="field"
+    />
+  </KateCmsFieldWrapper>
+</template>

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

@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import {
+  encodeUserFieldValue,
+  filterUsersByRole,
+  isImageMedia,
+  isUserFieldValue,
+  userFieldId,
+} from '@katecms/core'
+import type { Field, SelectChoice, SelectModelValue, UserFieldValue } from '@katecms/core'
+
+type UserFieldConfig = Extract<Field, { type: 'user' }>
+
+const props = withDefaults(defineProps<{
+  fieldKey: string
+  field?: UserFieldConfig
+}>(), {
+  field: () => ({ type: 'user', label: '' }),
+})
+
+const model = defineModel<unknown>()
+
+const rootClass = 'katecms-user-field'
+
+function usersFromModel(value: unknown): UserFieldValue[] {
+  const items = Array.isArray(value) ? value : value != null && value !== '' ? [value] : []
+  return items.filter(isUserFieldValue)
+}
+
+const users = ref<UserFieldValue[]>(usersFromModel(model.value))
+const loading = ref(false)
+const loadError = ref<string | null>(null)
+
+const filteredUsers = computed(() => filterUsersByRole(users.value, props.field?.role))
+
+function userLabel(user: UserFieldValue): string {
+  const name = user.name?.trim()
+  return name ? `${name} (${user.email})` : user.email
+}
+
+function avatarUrl(user: UserFieldValue): string | undefined {
+  const avatar = user.avatar
+  return avatar && isImageMedia(avatar) ? avatar.url : undefined
+}
+
+const selectChoices = computed<SelectChoice[]>(() => filteredUsers.value.map(user => ({
+  val: user.id,
+  lbl: userLabel(user),
+  img: avatarUrl(user),
+})))
+
+const showOptionImages = computed(() => selectChoices.value.some(choice => 'img' in choice && choice.img))
+
+function findUser(id: string): UserFieldValue | undefined {
+  if (!id) {
+    return undefined
+  }
+  return filteredUsers.value.find(user => String(user.id) === id)
+    ?? users.value.find(user => String(user.id) === id)
+}
+
+function emptyValue(): unknown {
+  if (props.field?.multiple) {
+    return []
+  }
+  return props.field?.allowNull ? null : ''
+}
+
+const selected = computed<SelectModelValue>({
+  get() {
+    if (props.field?.multiple) {
+      return Array.isArray(model.value) ? model.value.map(userFieldId).filter(Boolean) : []
+    }
+    return userFieldId(model.value)
+  },
+  set(raw) {
+    if (props.field?.multiple) {
+      const ids = Array.isArray(raw) ? raw.map(id => String(id)) : []
+      model.value = ids
+        .map(id => findUser(id))
+        .filter((user): user is UserFieldValue => !!user)
+        .map(user => encodeUserFieldValue(user, props.field?.returnFormat))
+      return
+    }
+    if (raw === '' || raw == null) {
+      model.value = emptyValue()
+      return
+    }
+    const user = findUser(String(raw))
+    model.value = user ? encodeUserFieldValue(user, props.field?.returnFormat) : emptyValue()
+  },
+})
+
+const placeholder = computed(() => {
+  if (props.field?.multiple) {
+    return 'Select users'
+  }
+  if (props.field?.allowNull || !props.field?.required) {
+    return 'Select user'
+  }
+  return ''
+})
+
+function mergeUsers(fetched: UserFieldValue[]) {
+  const byId = new Map(fetched.map(user => [user.id, user]))
+  for (const existing of users.value) {
+    if (!byId.has(existing.id)) {
+      byId.set(existing.id, existing)
+    }
+  }
+  users.value = [...byId.values()]
+}
+
+function syncModel() {
+  if (props.field?.multiple) {
+    const ids = Array.isArray(model.value) ? model.value.map(userFieldId).filter(Boolean) : []
+    const next = ids
+      .map(id => findUser(id))
+      .filter((user): user is UserFieldValue => !!user)
+    if (next.length !== ids.length) {
+      model.value = next.map(user => encodeUserFieldValue(user, props.field?.returnFormat))
+    }
+    return
+  }
+
+  const id = userFieldId(model.value)
+  if (!id && props.field?.allowNull && (model.value === undefined || model.value === '')) {
+    model.value = null
+  }
+}
+
+async function loadUsers() {
+  loading.value = true
+  loadError.value = null
+  try {
+    const res = await $fetch<{ users: UserFieldValue[] }>('/api/_katecms/users')
+    mergeUsers(res.users)
+  }
+  catch {
+    loadError.value = 'Could not load users.'
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+onMounted(async () => {
+  await loadUsers()
+  syncModel()
+})
+</script>
+
+<template>
+  <KateCmsFieldWrapper
+    :field-key="fieldKey"
+    :field="field"
+    :class="rootClass"
+  >
+    <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 users"
+      :selected-opt-clearable="!!field?.allowNull"
+      :selected-opt-image="showOptionImages"
+      :option-icon="showOptionImages"
+      no-results-text="No users found"
+      :aria-label="field?.label || fieldKey"
+    />
+  </KateCmsFieldWrapper>
+</template>
+
+<style scoped lang="scss">
+@use "../../assets/styles" as *;
+
+$root: '.katecms-user-field';
+
+#{$root} {
+  &__error {
+    margin: 0 0 math-rem(8);
+    color: $color-danger;
+    font-size: math-rem(13);
+  }
+
+  :deep(.katecms-select__option > span) {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+</style>