katecms 0.0.0-stage → 1.0.0-beta.1

package/dist/runtime/internal/fields/SelectField.d.vue.ts

@@ -0,0 +1,21 @@
+import type { Field } from '@katecms/core';
+type SelectFieldConfig = Extract<Field, {
+    type: 'select';
+}>;
+type __VLS_Props = {
+    fieldKey: string;
+    field?: SelectFieldConfig;
+};
+type __VLS_ModelProps = {
+    modelValue?: unknown;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+}>, {
+    field: import("@katecms/core").SelectField;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,101 @@
+<script setup>
+import { computed, onMounted } from "vue";
+import {
+  decodeChoiceValue,
+  encodeChoiceValue,
+  selectChoiceLookup,
+  walkSelectChoices
+} from "@katecms/core";
+const props = defineProps({
+  fieldKey: { type: String, required: true },
+  field: { type: Object, required: false, default: () => ({ type: "select", label: "", choices: [] }) }
+});
+const model = defineModel({ type: null });
+const lookup = computed(() => selectChoiceLookup(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);
+}
+function formattedFromSelected() {
+  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, b) {
+  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({
+  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 "\u2014 Select \u2014";
+  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/dist/runtime/internal/fields/SelectField.vue.d.ts

@@ -0,0 +1,21 @@
+import type { Field } from '@katecms/core';
+type SelectFieldConfig = Extract<Field, {
+    type: 'select';
+}>;
+type __VLS_Props = {
+    fieldKey: string;
+    field?: SelectFieldConfig;
+};
+type __VLS_ModelProps = {
+    modelValue?: unknown;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+}>, {
+    field: import("@katecms/core").SelectField;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,63 @@
+<script setup>
+defineProps({
+  fieldKey: { type: String, required: true },
+  field: { type: Object, required: false, default: () => ({ type: "separator" }) }
+});
+const rootClass = "katecms-separator-field";
+</script>
+
+<template>
+  <div
+    :class="rootClass"
+    role="separator"
+    :aria-label="field?.label || void 0"
+  >
+    <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>
+.katecms-separator-field {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  margin: 0.625rem 0;
+}
+.katecms-separator-field__label {
+  flex-shrink: 0;
+  font-size: 1.0625rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--katecms-color-ink);
+  white-space: nowrap;
+}
+.katecms-separator-field__line {
+  flex: 1 1 auto;
+  height: 4px;
+  background-color: var(--katecms-color-accent);
+}
+.katecms-separator-field__hr {
+  display: block;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 4px;
+  margin: 0;
+  background-color: var(--katecms-color-accent);
+}
+</style>

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

@@ -0,0 +1,210 @@
+<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: "tab", panels: [] }) }
+});
+defineModel({ type: null });
+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) {
+  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);
+}
+function selectTab(index) {
+  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}%` : 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>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.katecms-tab-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-tab-field--left {
+  flex-direction: row;
+  align-items: stretch;
+}
+.katecms-tab-field__hint {
+  margin: 0;
+  padding: 0.75rem;
+  color: var(--katecms-color-muted);
+}
+.katecms-tab-field__nav {
+  display: flex;
+  flex-shrink: 0;
+  background-color: var(--katecms-color-bg);
+  border-bottom: 1px solid var(--katecms-color-border);
+}
+.katecms-tab-field--left .katecms-tab-field__nav {
+  flex-direction: column;
+  width: 10rem;
+  border-bottom: 0;
+  border-right: 1px solid var(--katecms-color-border);
+}
+.katecms-tab-field__tab {
+  padding: 0.625rem 0.875rem;
+  border: 0;
+  border-right: 1px solid var(--katecms-color-border);
+  background: transparent;
+  color: var(--katecms-color-muted);
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.katecms-tab-field__tab:last-child {
+  border-right: 0;
+}
+.katecms-tab-field__tab:hover {
+  color: var(--katecms-color-ink);
+  background-color: var(--katecms-color-accent-wash);
+}
+.katecms-tab-field__tab.is-active {
+  color: var(--katecms-color-ink);
+  font-weight: 600;
+  background-color: var(--katecms-color-surface);
+}
+.katecms-tab-field__tab:focus {
+  outline: none;
+}
+.katecms-tab-field__tab:focus-visible {
+  outline: 2px solid rgb(from var(--katecms-color-accent) r g b / 0.35);
+  outline-offset: -2px;
+}
+.katecms-tab-field--left .katecms-tab-field__tab {
+  border-right: 0;
+  border-bottom: 1px solid var(--katecms-color-border);
+}
+.katecms-tab-field--left .katecms-tab-field__tab:last-child {
+  border-bottom: 0;
+}
+.katecms-tab-field--left .katecms-tab-field__tab.is-active {
+  box-shadow: inset 2px 0 0 var(--katecms-color-accent);
+}
+.katecms-tab-field--top .katecms-tab-field__tab.is-active {
+  box-shadow: inset 0 -2px 0 var(--katecms-color-accent);
+}
+.katecms-tab-field__panel {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0.75rem 0.5rem;
+}
+.katecms-tab-field__fields {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem 0;
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
+}
+.katecms-tab-field__field {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  width: 100%;
+}
+</style>

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

@@ -0,0 +1,22 @@
+<script setup>
+defineProps({
+  fieldKey: { type: String, required: true },
+  field: { type: Object, required: false, default: () => ({ type: "text", label: "" }) }
+});
+const model = defineModel({ type: String });
+</script>
+
+<template>
+  <KateCmsFieldWrapper
+    :field-key="fieldKey"
+    :field="field"
+  >
+    <KateCmsInputControl
+      v-model="model"
+      type="text"
+      :field-key="fieldKey"
+      :field="field"
+      :maxlength="field?.maxLength || void 0"
+    />
+  </KateCmsFieldWrapper>
+</template>

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

@@ -0,0 +1,62 @@
+<script setup>
+defineProps({
+  fieldKey: { type: String, required: true },
+  field: { type: Object, required: false, default: () => ({ type: "textarea", label: "" }) }
+});
+const model = defineModel({ type: 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 || void 0"
+      :required="!!field?.required"
+      :maxlength="field?.maxLength || void 0"
+    />
+  </KateCmsFieldWrapper>
+</template>
+
+<style scoped>
+.katecms-textarea-field {
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: 0.625rem;
+  border: 1px solid var(--katecms-color-border);
+  border-radius: var(--katecms-border-radius);
+  background-color: var(--katecms-color-surface);
+  color: var(--katecms-color-ink);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  resize: vertical;
+}
+.katecms-textarea-field::-webkit-input-placeholder {
+  color: var(--katecms-color-muted);
+  opacity: 1;
+}
+.katecms-textarea-field::-moz-placeholder {
+  color: var(--katecms-color-muted);
+  opacity: 1;
+}
+.katecms-textarea-field::-ms-input-placeholder {
+  color: var(--katecms-color-muted);
+  opacity: 1;
+}
+.katecms-textarea-field::placeholder {
+  color: var(--katecms-color-muted);
+  opacity: 1;
+}
+.katecms-textarea-field:focus {
+  outline: none;
+  border-color: var(--katecms-color-accent);
+}
+</style>

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

@@ -0,0 +1,24 @@
+<script setup>
+defineProps({
+  fieldKey: { type: String, required: true },
+  field: { type: Object, required: false, default: () => ({ type: "time_picker", label: "" }) }
+});
+const model = defineModel({ type: 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>