katecms 0.0.0-stage → 1.0.0-beta.1

package/dist/runtime/pages/admin/demo-fields.vue

@@ -0,0 +1,1327 @@
+<script setup>
+import { computed, reactive } from "vue";
+import { useHead } from "#imports";
+import {
+  buildFormValues,
+  isVisible
+} from "@katecms/core";
+import { resolveField } from "../../utils/helpers";
+import { provideKateCmsFieldValues } from "../../utils/field-values";
+const rootClass = "katecms-admin-demo";
+useHead({ title: "Field demo" });
+const fields = {
+  text_test: {
+    type: "text",
+    label: "Text",
+    instructions: "Text instructions",
+    required: true,
+    position: "main",
+    placeholder: "Text Placeholder",
+    defaultValue: "Text Test Default",
+    maxLength: 120,
+    prepend: "Prepend",
+    append: "Append",
+    columnWidth: 50
+  },
+  textarea_test: {
+    type: "textarea",
+    label: "Textarea",
+    instructions: "Textarea instructions",
+    required: true,
+    position: "main",
+    placeholder: "Textarea",
+    defaultValue: "Textarea Test Default\n\nTextarea Test Default\nTextarea Test Default\n\nTextarea Test Default",
+    maxLength: 500,
+    rows: 6,
+    newLines: "autop",
+    columnWidth: 50
+  },
+  email_test: {
+    type: "email",
+    label: "Email",
+    instructions: "Email instructions",
+    required: true,
+    position: "main",
+    placeholder: "name@example.com",
+    defaultValue: "test@example.com",
+    prepend: "@",
+    append: ".com",
+    columnWidth: 50
+  },
+  url_test: {
+    type: "url",
+    label: "Url",
+    instructions: "Url instructions",
+    required: true,
+    position: "main",
+    placeholder: "https://example.com",
+    defaultValue: "https://example.com",
+    columnWidth: 50
+  },
+  oembed_test: {
+    type: "oembed",
+    label: "Oembed",
+    instructions: "Oembed instructions",
+    required: true,
+    defaultValue: "https://youtu.be/AA4EADkgk4Q?si=iihiGODQHIS-tgR_",
+    position: "main",
+    width: 560,
+    height: 315,
+    columnWidth: 50
+  },
+  wysiwyg_test: {
+    type: "wysiwyg",
+    label: "Wysiwyg",
+    instructions: "Wysiwyg instructions",
+    required: true,
+    position: "main",
+    defaultValue: "<p>Wysiwyg <strong>default</strong> value</p>",
+    tabs: "all",
+    toolbar: "full",
+    columnWidth: 50
+  },
+  password_test: {
+    type: "password",
+    label: "Password",
+    instructions: "Password instructions",
+    required: true,
+    position: "main",
+    placeholder: "Password",
+    prepend: "Prepend",
+    append: "Append",
+    columnWidth: 50
+  },
+  button_group_test: {
+    type: "button_group",
+    label: "Button Group",
+    instructions: "Button group instructions",
+    required: true,
+    position: "main",
+    layout: "horizontal",
+    choices: {
+      red: "Red",
+      green: "Green",
+      blue: "Blue"
+    },
+    defaultValue: "green",
+    returnFormat: "label",
+    columnWidth: 50
+  },
+  checkbox_test: {
+    type: "checkbox",
+    label: "Checkbox",
+    instructions: "Checkbox instructions",
+    required: true,
+    position: "main",
+    layout: "vertical",
+    toggle: true,
+    allowCustomChoices: true,
+    choices: {
+      red: "Red",
+      green: "Green",
+      blue: "Blue"
+    },
+    defaultValue: ["green", "blue"],
+    returnFormat: "array",
+    columnWidth: 50
+  },
+  color_picker_test: {
+    type: "color_picker",
+    label: "Color Picker",
+    instructions: "Color picker instructions",
+    required: true,
+    position: "main",
+    defaultValue: "#2F6FED",
+    enableOpacity: true,
+    returnFormat: "array",
+    showColorWheel: true,
+    paletteColors: [
+      "rgba(244, 67, 54, 1)",
+      "rgba(233, 30, 99, 0.95)",
+      "rgba(156, 39, 176, 0.9)",
+      "rgba(103, 58, 183, 0.85)",
+      "rgba(63, 81, 181, 0.8)",
+      "rgba(47, 111, 237, 0.9)",
+      "rgba(3, 169, 244, 0.7)",
+      "rgba(0, 188, 212, 0.7)",
+      "rgba(42, 154, 102, 0.85)",
+      "rgba(76, 175, 80, 0.8)",
+      "rgba(196, 133, 26, 0.9)",
+      "rgba(214, 69, 69, 1)"
+    ],
+    rgba: true,
+    hsla: true,
+    columnWidth: 50
+  },
+  date_picker_test: {
+    type: "date_picker",
+    label: "Date Picker",
+    instructions: "Date picker instructions",
+    required: true,
+    position: "main",
+    displayFormat: "DD.MM.YYYY",
+    returnFormat: "YYYY-MM-DD",
+    firstDay: 1,
+    defaultToCurrentDate: true,
+    columnWidth: 50
+  },
+  date_time_picker_test: {
+    type: "date_time_picker",
+    label: "Date Time Picker",
+    instructions: "Date time picker instructions",
+    required: true,
+    position: "main",
+    displayFormat: "DD.MM.YYYY HH:mm",
+    returnFormat: "YYYY-MM-DD HH:mm",
+    firstDay: 1,
+    defaultToCurrentDate: true,
+    columnWidth: 50
+  },
+  time_picker_test: {
+    type: "time_picker",
+    label: "Time Picker",
+    instructions: "Time picker instructions",
+    required: true,
+    position: "main",
+    displayFormat: "HH:mm",
+    returnFormat: "HH:mm",
+    columnWidth: 50
+  },
+  number_test: {
+    type: "number",
+    label: "Number",
+    instructions: "Number instructions",
+    required: true,
+    position: "main",
+    placeholder: "Number",
+    defaultValue: 10,
+    min: 0,
+    max: 100,
+    step: 5,
+    prepend: "$",
+    append: "USD",
+    columnWidth: 50
+  },
+  range_test: {
+    type: "range",
+    label: "Range",
+    instructions: "Range instructions",
+    required: true,
+    position: "main",
+    defaultValue: 25,
+    min: 0,
+    max: 200,
+    step: 5,
+    prepend: "min",
+    append: "max",
+    columnWidth: 50
+  },
+  radio_test: {
+    type: "radio",
+    label: "Radio",
+    instructions: "Radio instructions",
+    required: true,
+    position: "main",
+    layout: "vertical",
+    allowNull: true,
+    allowCustomChoices: true,
+    choices: {
+      red: "Red",
+      green: "Green",
+      blue: "Blue"
+    },
+    defaultValue: "green",
+    returnFormat: "label",
+    columnWidth: 50
+  },
+  true_false_test: {
+    type: "true_false",
+    label: "True / False",
+    instructions: "True/False instructions",
+    required: true,
+    position: "main",
+    message: "Enable option",
+    ui: true,
+    uiOnText: "On",
+    uiOffText: "Off",
+    defaultValue: true,
+    columnWidth: 50
+  },
+  true_false_test_no_ui: {
+    type: "true_false",
+    label: "True / False",
+    instructions: "True/False instructions",
+    required: true,
+    position: "main",
+    message: "Enable option",
+    defaultValue: true,
+    columnWidth: 50
+  },
+  select_test: {
+    type: "select",
+    label: "Select",
+    instructions: "Select instructions",
+    required: true,
+    position: "main",
+    placeholder: "\u0442\u0410\u0424 Select \u0442\u0410\u0424",
+    allowNull: true,
+    clearable: true,
+    search: true,
+    searchPlaceholder: "Filter\u0442\u0410\u0436",
+    choices: [
+      { val: "red", lbl: "Red" },
+      { val: "green", lbl: "Green", check: true },
+      { val: "blue", lbl: "Blue" },
+      {
+        type: "group",
+        title: "Other",
+        childs: [
+          { val: "amber", lbl: "Amber" },
+          { val: "gray", lbl: "Gray", disabled: true }
+        ]
+      }
+    ],
+    defaultValue: "green",
+    returnFormat: "array",
+    columnWidth: 50
+  },
+  image_select_test: {
+    type: "image_select",
+    label: "Image Select",
+    instructions: "Single select (radio) with images",
+    required: true,
+    position: "main",
+    layout: "horizontal",
+    allowNull: true,
+    choices: {
+      red: { label: "Red", image: "https://picsum.photos/800/600" },
+      green: { label: "Green", image: "https://picsum.photos/600/600" },
+      blue: { label: "Blue", image: "https://picsum.photos/800/400" }
+    },
+    defaultValue: "green",
+    returnFormat: "value",
+    columnWidth: 50
+  },
+  image_select_multiple_test: {
+    type: "image_select",
+    label: "Image Select Multiple",
+    instructions: "Multiple select (checkbox) with images",
+    required: true,
+    position: "main",
+    layout: "horizontal",
+    multiple: true,
+    choices: {
+      left: { label: "Left", image: "https://picsum.photos/700/600" },
+      center: { label: "Center", image: "https://picsum.photos/500/600" },
+      right: { label: "Right", image: "https://picsum.photos/800/420" }
+    },
+    defaultValue: ["left", "center"],
+    returnFormat: "array",
+    width: 140,
+    height: 110,
+    columnWidth: 50
+  },
+  separator_test: {
+    type: "separator",
+    label: "Separator",
+    position: "main",
+    columnWidth: 100
+  },
+  group_test: {
+    type: "group",
+    label: "Group",
+    instructions: "Group instructions",
+    position: "main",
+    columnWidth: 100,
+    subFields: {
+      title: {
+        type: "text",
+        label: "Title",
+        required: true,
+        placeholder: "Title",
+        defaultValue: "",
+        columnWidth: 50
+      },
+      description: {
+        type: "textarea",
+        label: "Description",
+        placeholder: "Description",
+        defaultValue: "",
+        columnWidth: 50
+      }
+    }
+  },
+  tab_test: {
+    type: "tab",
+    placement: "top",
+    position: "main",
+    columnWidth: 100,
+    panels: [
+      {
+        label: "Tab 1",
+        subFields: {
+          tab_title: {
+            type: "text",
+            label: "Title",
+            required: true,
+            placeholder: "Title",
+            defaultValue: "",
+            columnWidth: 50
+          },
+          tab_description: {
+            type: "textarea",
+            label: "Description",
+            placeholder: "Description",
+            defaultValue: "",
+            columnWidth: 50
+          }
+        }
+      },
+      {
+        label: "Tab 2",
+        subFields: {
+          tab_title_2: {
+            type: "text",
+            label: "Title 2",
+            required: true,
+            placeholder: "Title",
+            defaultValue: "",
+            columnWidth: 50
+          },
+          tab_description_2: {
+            type: "textarea",
+            label: "Description 2",
+            placeholder: "Description",
+            defaultValue: "",
+            columnWidth: 50
+          }
+        }
+      }
+    ]
+  },
+  accordion_test: {
+    type: "accordion",
+    position: "main",
+    columnWidth: 100,
+    open: 0,
+    multiExpand: false,
+    panels: [
+      {
+        label: "Panel 1",
+        subFields: {
+          accordion_title: {
+            type: "text",
+            label: "Title",
+            required: true,
+            placeholder: "Title",
+            defaultValue: "",
+            columnWidth: 50
+          },
+          accordion_description: {
+            type: "textarea",
+            label: "Description",
+            placeholder: "Description",
+            defaultValue: "",
+            columnWidth: 50
+          }
+        }
+      },
+      {
+        label: "Panel 2",
+        subFields: {
+          accordion_title_2: {
+            type: "text",
+            label: "Title 2",
+            required: true,
+            placeholder: "Title",
+            defaultValue: "",
+            columnWidth: 50
+          },
+          accordion_description_2: {
+            type: "textarea",
+            label: "Description 2",
+            placeholder: "Description",
+            defaultValue: "",
+            columnWidth: 50
+          }
+        }
+      }
+    ]
+  },
+  repeater_test: {
+    type: "repeater",
+    label: "Repeater",
+    instructions: "Repeater instructions",
+    position: "main",
+    collapsed: "title",
+    min: 2,
+    max: 5,
+    buttonLabel: "Add item",
+    columnWidth: 100,
+    subFields: {
+      title: {
+        type: "text",
+        label: "Title",
+        required: true,
+        placeholder: "Title",
+        defaultValue: "",
+        columnWidth: 50
+      },
+      description: {
+        type: "textarea",
+        label: "Description",
+        placeholder: "Description",
+        defaultValue: "",
+        columnWidth: 50
+      },
+      nested: {
+        type: "repeater",
+        label: "Sub Repeater",
+        instructions: "Nested repeater",
+        collapsed: "title",
+        buttonLabel: "Add nested item",
+        columnWidth: 100,
+        subFields: {
+          title: {
+            type: "text",
+            label: "Title",
+            required: true,
+            placeholder: "Title",
+            defaultValue: ""
+          },
+          description: {
+            type: "textarea",
+            label: "Description",
+            placeholder: "Description",
+            defaultValue: "",
+            columnWidth: 100
+          }
+        }
+      }
+    }
+  },
+  file_test: {
+    type: "file",
+    label: "File",
+    instructions: "File instructions",
+    required: true,
+    position: "main",
+    returnFormat: "array",
+    library: "all",
+    maxSize: 10,
+    columnWidth: 50
+  },
+  image_test: {
+    type: "image",
+    label: "Image",
+    instructions: "Image instructions",
+    required: true,
+    position: "main",
+    returnFormat: "array",
+    library: "all",
+    cropType: true,
+    columnWidth: 50
+  },
+  image_icon_test: {
+    type: "image",
+    label: "Image (icon)",
+    instructions: "Add Image is an icon button when iconMode is true.",
+    position: "main",
+    returnFormat: "array",
+    library: "all",
+    iconMode: true,
+    columnWidth: 50
+  },
+  gallery_test: {
+    type: "gallery",
+    label: "Gallery",
+    instructions: "Gallery instructions \u0442\u0410\u0424 drag to reorder, multi-select in media library",
+    required: true,
+    position: "main",
+    returnFormat: "array",
+    library: "all",
+    insert: "append",
+    previewSize: "thumbnail",
+    min: 1,
+    max: 8,
+    columnWidth: 100
+  },
+  open_street_map_test: {
+    type: "open_street_map",
+    label: "OpenStreetMap",
+    instructions: "Double-click or search an address to place a marker. Zoom with \u252C\u2592 only. Locate and Fit Bounds are on the map.",
+    position: "main",
+    height: 360,
+    centerLat: "55.751244",
+    centerLng: "37.618423",
+    zoom: 10,
+    columnWidth: 100
+  },
+  open_street_map_multiple_test: {
+    type: "open_street_map",
+    label: "OpenStreetMap (multiple)",
+    instructions: "Multiple markers: each has its own Label. Fit Bounds shows all points.",
+    position: "main",
+    height: 500,
+    multiple: true,
+    columnWidth: 100
+  },
+  link_test: {
+    type: "link",
+    label: "Link",
+    instructions: "Link instructions",
+    required: true,
+    position: "main",
+    returnFormat: "array",
+    columnWidth: 50
+  },
+  user_test: {
+    type: "user",
+    label: "User",
+    instructions: "Pick one or more accounts. Stored as user objects (no password).",
+    required: true,
+    position: "main",
+    role: "all",
+    allowNull: true,
+    returnFormat: "array",
+    columnWidth: 50,
+    multiple: true
+  },
+  user_id_test: {
+    type: "user",
+    label: "User (id)",
+    instructions: "Single user, stored as a numeric id.",
+    position: "main",
+    role: "all",
+    allowNull: true,
+    returnFormat: "id",
+    columnWidth: 50
+  },
+  separator_test_2: {
+    type: "separator",
+    label: "Test Fields",
+    position: "main",
+    columnWidth: 100
+  },
+  post_object_test: {
+    type: "post_object",
+    label: "Post Object",
+    instructions: "Pages and products, stored as objects.",
+    position: "main",
+    postType: ["pages", "products"],
+    multiple: true,
+    allowNull: true,
+    returnFormat: "object"
+  },
+  post_object_id_test: {
+    type: "post_object",
+    label: "Post Object (id)",
+    instructions: "Single page, stored as a numeric id.",
+    position: "main",
+    postType: ["pages"],
+    allowNull: true,
+    returnFormat: "id"
+  },
+  page_link_test: {
+    type: "page_link",
+    label: "Page Link",
+    instructions: "Public URLs, including collection archives.",
+    position: "main",
+    postType: ["pages", "products"],
+    multiple: true,
+    allowArchives: true,
+    allowNull: true
+  },
+  relationship_test: {
+    type: "relationship",
+    label: "Relationship",
+    instructions: "Pick and reorder entries. Thumbnails come from the page `thumbnail` field.",
+    position: "main",
+    postType: ["pages", "products"],
+    dictionary: ["categories", "services"],
+    filters: ["search", "post_type", "dictionary"],
+    elements: ["thumbnail"],
+    max: 4,
+    returnFormat: "object"
+  },
+  dictionary_test: {
+    type: "dictionary",
+    label: "Dictionary",
+    instructions: "Categories as checkboxes, stored as term objects.",
+    position: "main",
+    dictionary: "categories",
+    fieldType: "checkbox",
+    returnFormat: "object"
+  },
+  dictionary_select_test: {
+    type: "dictionary",
+    label: "Dictionary (select)",
+    instructions: "Services as a select. New terms can be added when you have create access.",
+    position: "main",
+    dictionary: "services",
+    fieldType: "select",
+    allowNull: true,
+    addTerm: true,
+    returnFormat: "object"
+  },
+  flexible_content_test: {
+    type: "flexible_content",
+    label: "Flexible Content",
+    instructions: "Flexible Content instructions",
+    position: "main",
+    max: 5,
+    buttonLabel: "Add layout",
+    columnWidth: 100,
+    layouts: {
+      hero: {
+        label: "Hero",
+        max: 2,
+        preview: "https://picsum.photos/800/600",
+        subFields: {
+          title: {
+            type: "text",
+            label: "Title",
+            required: true,
+            placeholder: "Welcome",
+            defaultValue: "Welcome",
+            columnWidth: 50
+          },
+          description: {
+            type: "textarea",
+            label: "Description",
+            placeholder: "Lorem ipsum\u0442\u0410\u0436",
+            defaultValue: "Lorem ipsum\u0442\u0410\u0436",
+            columnWidth: 50
+          }
+        }
+      },
+      faq: {
+        label: "FAQ",
+        subFields: {
+          heading: {
+            type: "text",
+            label: "Heading",
+            required: true,
+            placeholder: "About us",
+            defaultValue: "About us",
+            columnWidth: 100
+          }
+        }
+      },
+      card: {
+        label: "Card",
+        subFields: {
+          heading: {
+            type: "text",
+            label: "Heading",
+            required: true,
+            placeholder: "About us",
+            defaultValue: "About us",
+            columnWidth: 100
+          }
+        }
+      }
+    }
+  },
+  text_sidebar: {
+    type: "text",
+    label: "Sidebar text",
+    instructions: "Rendered in the sidebar",
+    position: "sidebar",
+    placeholder: "Sidebar",
+    defaultValue: "Aside"
+  },
+  separator_form: {
+    type: "separator",
+    label: "Form",
+    position: "main",
+    columnWidth: 100
+  },
+  form_test: {
+    type: "form",
+    label: "Form",
+    instructions: "Single form, stored as an id. Empty value is null.",
+    position: "main",
+    multiple: false,
+    allowNull: true,
+    columnWidth: 50
+  },
+  form_multiple_test: {
+    type: "form",
+    label: "Forms",
+    instructions: "Multiple forms, stored as ids. Empty value is an array.",
+    position: "main",
+    multiple: true,
+    allowNull: true,
+    columnWidth: 50
+  }
+};
+const values = reactive(buildFormValues(fields));
+provideKateCmsFieldValues(values);
+const visibleFields = computed(
+  () => Object.entries(fields).filter(
+    ([, field]) => isVisible(field.conditionalLogic, values)
+  )
+);
+const mainFields = computed(
+  () => visibleFields.value.filter(([, field]) => (field.position ?? "main") === "main")
+);
+const sidebarFields = computed(
+  () => visibleFields.value.filter(([, field]) => field.position === "sidebar")
+);
+</script>
+
+<template>
+  <div :class="rootClass">
+    <div :class="[`${rootClass}__buttons`]">
+      <div :class="[`${rootClass}__buttons-title`]">
+        UiButton
+      </div>
+
+      <div :class="[`${rootClass}__buttons-grid`]">
+        <span :class="[`${rootClass}__buttons-label`]">Default</span>
+        <KateCmsUiButton
+          tag="button"
+          variant="small"
+        >
+          Save
+        </KateCmsUiButton>
+        <KateCmsUiButton tag="button">
+          Save
+        </KateCmsUiButton>
+
+        <span :class="[`${rootClass}__buttons-label`]">Secondary</span>
+        <KateCmsUiButton
+          tag="button"
+          :variant="['secondary', 'small']"
+        >
+          Preview
+        </KateCmsUiButton>
+        <KateCmsUiButton
+          tag="button"
+          variant="secondary"
+        >
+          Preview
+        </KateCmsUiButton>
+
+        <span :class="[`${rootClass}__buttons-label`]">Tertiary</span>
+        <KateCmsUiButton
+          tag="button"
+          :variant="['tertiary', 'small']"
+        >
+          Cancel
+        </KateCmsUiButton>
+        <KateCmsUiButton
+          tag="button"
+          variant="tertiary"
+        >
+          Cancel
+        </KateCmsUiButton>
+
+        <span :class="[`${rootClass}__buttons-label`]">Red</span>
+        <KateCmsUiButton
+          tag="button"
+          :variant="['red', 'small']"
+        >
+          Remove
+        </KateCmsUiButton>
+        <KateCmsUiButton
+          tag="button"
+          variant="red"
+        >
+          Remove
+        </KateCmsUiButton>
+
+        <span :class="[`${rootClass}__buttons-label`]">Active</span>
+        <KateCmsUiButton
+          tag="button"
+          variant="small"
+          active
+        >
+          Save
+        </KateCmsUiButton>
+        <KateCmsUiButton
+          tag="button"
+          active
+        >
+          Save
+        </KateCmsUiButton>
+
+        <span :class="[`${rootClass}__buttons-label`]">Active secondary</span>
+        <KateCmsUiButton
+          tag="button"
+          :variant="['secondary', 'small']"
+          active
+        >
+          Preview
+        </KateCmsUiButton>
+        <KateCmsUiButton
+          tag="button"
+          variant="secondary"
+          active
+        >
+          Preview
+        </KateCmsUiButton>
+
+        <span :class="[`${rootClass}__buttons-label`]">Active tertiary</span>
+        <KateCmsUiButton
+          tag="button"
+          :variant="['tertiary', 'small']"
+          active
+        >
+          Cancel
+        </KateCmsUiButton>
+        <KateCmsUiButton
+          tag="button"
+          variant="tertiary"
+          active
+        >
+          Cancel
+        </KateCmsUiButton>
+
+        <span :class="[`${rootClass}__buttons-label`]">Active red</span>
+        <KateCmsUiButton
+          tag="button"
+          :variant="['red', 'small']"
+          active
+        >
+          Remove
+        </KateCmsUiButton>
+        <KateCmsUiButton
+          tag="button"
+          variant="red"
+          active
+        >
+          Remove
+        </KateCmsUiButton>
+
+        <span :class="[`${rootClass}__buttons-label`]">With icon</span>
+        <KateCmsUiButton
+          tag="button"
+          variant="small"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M12 5v14" />
+            <path d="M5 12h14" />
+          </svg>
+          Add
+        </KateCmsUiButton>
+        <KateCmsUiButton tag="button">
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M12 5v14" />
+            <path d="M5 12h14" />
+          </svg>
+          Add
+        </KateCmsUiButton>
+
+        <span :class="[`${rootClass}__buttons-label`]">Secondary icon</span>
+        <KateCmsUiButton
+          tag="button"
+          :variant="['secondary', 'small']"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8Z" />
+            <circle
+              cx="12"
+              cy="12"
+              r="3"
+            />
+          </svg>
+          Preview
+        </KateCmsUiButton>
+        <KateCmsUiButton
+          tag="button"
+          variant="secondary"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8Z" />
+            <circle
+              cx="12"
+              cy="12"
+              r="3"
+            />
+          </svg>
+          Preview
+        </KateCmsUiButton>
+
+        <span :class="[`${rootClass}__buttons-label`]">Red icon</span>
+        <KateCmsUiButton
+          tag="button"
+          :variant="['red', 'small']"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M3 6h18" />
+            <path d="M8 6V4h8v2" />
+            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
+          </svg>
+          Remove
+        </KateCmsUiButton>
+        <KateCmsUiButton
+          tag="button"
+          variant="red"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M3 6h18" />
+            <path d="M8 6V4h8v2" />
+            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
+          </svg>
+          Remove
+        </KateCmsUiButton>
+
+        <span :class="[`${rootClass}__buttons-label`]">Icon only</span>
+        <KateCmsUiButton
+          tag="button"
+          :variant="['tertiary', 'small', 'icon']"
+          aria-label="Edit"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M12 20h9" />
+            <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" />
+          </svg>
+        </KateCmsUiButton>
+        <KateCmsUiButton
+          tag="button"
+          :variant="['tertiary', 'icon']"
+          aria-label="Edit"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M12 20h9" />
+            <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" />
+          </svg>
+        </KateCmsUiButton>
+
+        <span :class="[`${rootClass}__buttons-label`]">Active icon</span>
+        <KateCmsUiButton
+          tag="button"
+          :variant="['tertiary', 'small', 'icon']"
+          aria-label="Edit"
+          active
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M12 20h9" />
+            <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" />
+          </svg>
+        </KateCmsUiButton>
+        <KateCmsUiButton
+          tag="button"
+          :variant="['tertiary', 'icon']"
+          aria-label="Edit"
+          active
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M12 20h9" />
+            <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" />
+          </svg>
+        </KateCmsUiButton>
+
+        <span :class="[`${rootClass}__buttons-label`]">Disabled</span>
+        <KateCmsUiButton
+          tag="button"
+          variant="small"
+          disabled
+        >
+          Save
+        </KateCmsUiButton>
+        <KateCmsUiButton
+          tag="button"
+          disabled
+        >
+          Save
+        </KateCmsUiButton>
+
+        <span :class="[`${rootClass}__buttons-label`]">Link</span>
+        <KateCmsUiButton
+          variant="small"
+          :link="{ url: 'https://example.com', title: 'Example', target: '_blank' }"
+        >
+          Example
+        </KateCmsUiButton>
+        <KateCmsUiButton
+          :link="{ url: 'https://example.com', title: 'Example', target: '_blank' }"
+        >
+          Example
+        </KateCmsUiButton>
+      </div>
+    </div>
+
+    <div :class="[`${rootClass}__notices`]">
+      <div :class="[`${rootClass}__notices-title`]">
+        UiNotice
+      </div>
+
+      <div :class="[`${rootClass}__notices-label`]">
+        Static, one line
+      </div>
+      <div :class="[`${rootClass}__notices-stack`]">
+        <KateCmsUiNotice
+          placement="static"
+          variant="success"
+          message="Changes saved."
+        />
+        <KateCmsUiNotice
+          placement="static"
+          variant="info"
+          message="A new version of the CMS is available."
+        />
+        <KateCmsUiNotice
+          placement="static"
+          variant="warning"
+          message="This account has no password set."
+        />
+        <KateCmsUiNotice
+          placement="static"
+          variant="danger"
+          message="Could not save changes."
+        />
+      </div>
+
+      <div :class="[`${rootClass}__notices-label`]">
+        Static, two–three lines
+      </div>
+      <div :class="[`${rootClass}__notices-stack`]">
+        <KateCmsUiNotice
+          placement="static"
+          variant="success"
+        >
+          <div>The user was updated.</div>
+          <div>Email, display name and role are stored. You can keep editing this account without leaving the page.</div>
+        </KateCmsUiNotice>
+        <KateCmsUiNotice
+          placement="static"
+          variant="info"
+        >
+          <div>Media variants are generated in the background.</div>
+          <div>Large uploads may take a minute. Refresh the library if a thumbnail is still missing.</div>
+        </KateCmsUiNotice>
+        <KateCmsUiNotice
+          placement="static"
+          variant="warning"
+        >
+          <div>You are editing your own account.</div>
+          <div>Role and status cannot be changed here. Ask another administrator if those fields need an update.</div>
+        </KateCmsUiNotice>
+        <KateCmsUiNotice
+          placement="static"
+          variant="danger"
+        >
+          <div>The form could not be saved.</div>
+          <div>A user with this email already exists. Change the address and try again, or open the existing account instead.</div>
+        </KateCmsUiNotice>
+      </div>
+    </div>
+
+    <div :class="[`${rootClass}__layout`]">
+      <div :class="[`${rootClass}__main`]">
+        <div
+          v-for="[key, field] in mainFields"
+          :key="key"
+          :class="[`${rootClass}__field`]"
+          :style="field.columnWidth ? { width: `${field.columnWidth}%` } : void 0"
+        >
+          <component
+            :is="resolveField(field.type)"
+            v-model="values[key]"
+            :field-key="key"
+            :field="field"
+          />
+        </div>
+      </div>
+
+      <div
+        v-if="sidebarFields.length"
+        :class="[`${rootClass}__sidebar`]"
+      >
+        <component
+          :is="resolveField(field.type)"
+          v-for="[key, field] in sidebarFields"
+          :key="key"
+          v-model="values[key]"
+          :field-key="key"
+          :field="field"
+        />
+      </div>
+    </div>
+
+    <div :class="[`${rootClass}__values`]">
+      {{ values }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+body#katecms-body .katecms-admin-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  height: 100%;
+  overflow: auto;
+  padding: 0.5rem;
+}
+body#katecms-body .katecms-admin-demo__buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem;
+  background-color: var(--katecms-color-surface);
+  border: 1px solid var(--katecms-color-border);
+  border-radius: var(--katecms-border-radius);
+}
+body#katecms-body .katecms-admin-demo__buttons-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--katecms-color-ink);
+}
+body#katecms-body .katecms-admin-demo__buttons-grid {
+  display: grid;
+  grid-template-columns: 8.75rem auto auto;
+  align-items: center;
+  justify-content: start;
+  column-gap: 0.75rem;
+  row-gap: 0.625rem;
+}
+body#katecms-body .katecms-admin-demo__buttons-label {
+  font-size: 0.8125rem;
+  color: var(--katecms-color-muted);
+}
+body#katecms-body .katecms-admin-demo__notices-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--katecms-color-ink);
+}
+body#katecms-body .katecms-admin-demo__notices-label {
+  font-size: 0.8125rem;
+  color: var(--katecms-color-muted);
+  margin: 0.25rem 0 0;
+}
+body#katecms-body .katecms-admin-demo__notices {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem;
+  background-color: var(--katecms-color-surface);
+  border: 1px solid var(--katecms-color-border);
+  border-radius: var(--katecms-border-radius);
+}
+body#katecms-body .katecms-admin-demo__notices-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+body#katecms-body .katecms-admin-demo__layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 17.5rem;
+  gap: 1rem;
+  align-items: start;
+}
+@media (max-width: 1100px) {
+  body#katecms-body .katecms-admin-demo__layout {
+    grid-template-columns: 1fr;
+  }
+}
+body#katecms-body .katecms-admin-demo__main {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 1rem;
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
+}
+body#katecms-body .katecms-admin-demo__field {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  width: 100%;
+}
+body#katecms-body .katecms-admin-demo__sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+  background-color: var(--katecms-color-bg);
+  border: 1px solid var(--katecms-color-border);
+  border-radius: var(--katecms-border-radius);
+}
+body#katecms-body .katecms-admin-demo__values {
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0.75rem;
+  overflow: auto;
+  background-color: var(--katecms-color-bg);
+  border: 1px solid var(--katecms-color-border);
+  border-radius: var(--katecms-border-radius);
+  color: var(--katecms-color-ink);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.8125rem;
+  white-space: pre-wrap;
+}
+</style>