viur-ui 0.0.1

package/src/forms/bones/widgets/textBone.vue

@@ -0,0 +1,641 @@
+<template>
+  <template v-if="state.editor">
+    <template v-if="boneState.bonestructure?.['valid_html'] || boneState.bonestructure?.['validHtml']">
+      <ckeditor
+        v-model="state.value"
+        :editor="state.editor"
+        :config="state.editorConfig"
+        :disabled="boneState?.readonly"
+        :required="
+          boneState.bonestructure.required && !boneState.bonestructure.multiple && !boneState.bonestructure.languages
+        "
+        class="bone-widget bone-widget-text bone-widget-text-default"
+        :class="([`bone-widget-text-${name}`], [`bone-widget-text-${name}-html`])"
+        :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+        @ready="onReady"
+        @input="changeEvent"
+      ></ckeditor>
+      <input
+        type="text"
+        class="bone-widget-text-hidden"
+        :value="state.value"
+        :required="
+          boneState.bonestructure.required && !boneState.bonestructure.multiple && !boneState.bonestructure.languages
+        "
+      />
+    </template>
+    <wa-textarea
+      v-else
+      class="bone-widget bone-widget-text bone-widget-text-default"
+      :class="[`bone-widget-text-${name}`]"
+      :disabled="boneState?.readonly"
+      :value="value"
+      :required="
+        boneState.bonestructure.required && !boneState.bonestructure.multiple && !boneState.bonestructure.languages
+      "
+      :placeholder="state.placeholder"
+      :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+      @input="changeEventTextarea"
+    ></wa-textarea>
+  </template>
+</template>
+
+<script setup>
+import { reactive, onMounted, inject, computed, watch, onBeforeMount } from "vue"
+import { Ckeditor } from "@ckeditor/ckeditor5-vue"
+import {
+  ClassicEditor,
+  Essentials,
+  Paragraph,
+  Bold,
+  Italic,
+  SourceEditing,
+  BlockQuote,
+  Heading,
+  Image,
+  ImageStyle,
+  ImageToolbar,
+  ImageUpload,
+  ImageResizeButtons,
+  FileRepository,
+  ImageBlock,
+  ImageInline,
+  Indent,
+  IndentBlock,
+  Link,
+  List,
+  Table,
+  TableToolbar,
+  TextTransformation,
+  Underline,
+  Alignment,
+  RemoveFormat,
+  GeneralHtmlSupport,
+} from "ckeditor5"
+import coreTranslations from "ckeditor5/dist/translations/de.js"
+import "ckeditor5/dist/ckeditor5.css"
+import { ViURUploadAdapterPlugin } from "../uploadAdapter"
+
+/**
+ * Mehrzeiliges Textfeld für längere Inhalte, wahlweise als Textarea oder Rich-Text-Editor (CKEditor 5).
+ *
+ * Wenn `boneState.bonestructure.valid_html` oder `boneState.bonestructure.validHtml` gesetzt ist,
+ * wird ein CKEditor 5 (ClassicEditor) gerendert. Die sichtbaren Toolbar-Aktionen werden anhand
+ * der erlaubten HTML-Tags (`validTags`) gefiltert. Ohne HTML-Konfiguration erscheint ein
+ * einfaches `<wa-textarea>`. Bei `boneState.label === "placeholder"` wird der Bone-Name als
+ * Placeholder angezeigt statt als Label.
+ *
+ * @displayName TextBone
+ *
+ * @cssClass bone-widget - Basis-Klasse aller Bone-Widgets
+ * @cssClass bone-widget-text - Kennzeichnet den Bone-Typ
+ * @cssClass bone-widget-text-default - Standard-Variante (Textarea oder CKEditor)
+ * @cssClass bone-widget-text-{name} - Dynamisch gesetzt auf den Bone-Namen, z.B. `bone-widget-text-content`
+ * @cssClass bone-widget-text-{name}-html - Gesetzt wenn der Bone HTML-Inhalt enthält
+ */
+defineOptions({
+  inheritAttrs: false,
+})
+const props = defineProps({
+  /** Bone-Name – wird in jedem `change`-Event als erstes Argument übergeben. */
+  name: String,
+  /** Aktueller Bone-Wert als Klartext oder HTML-String. */
+  value: [Object, String, Number, Boolean, Array],
+  /** Index im Multiple-Array; `undefined` bei Einzelwert. */
+  index: Number,
+  /** Sprach-Key bei mehrsprachigen Bones, z.B. `"de"`. */
+  lang: String,
+  /** Bone-Struktur (aktuell nicht aktiv genutzt). */
+  bone: Object,
+  /** Setzt den Fokus auf das Eingabefeld (aktuell nicht implementiert). */
+  autofocus: Boolean,
+})
+
+const emit = defineEmits([
+  /**
+   * Wird bei jeder Wertänderung sowie beim Mount (Initialisierung) gefeuert.
+   * @arg {string} name - Bone-Name
+   * @arg {string} value - Aktueller Textwert oder HTML-String
+   * @arg {string|undefined} lang - Sprach-Key
+   * @arg {number|undefined} index - Index im Multiple-Array
+   */
+  "change",
+])
+
+const boneState = inject("boneState")
+const state = reactive({
+  value: "",
+  editorConfig: {},
+  editor: computed(() => ClassicEditor),
+  placeholder: computed(() => {
+    if (boneState.label !== "placeholder") return undefined
+    let name = boneState?.bonestructure?.descr
+    if (boneState.bonestructure.required) {
+      name += "*"
+    }
+    return name
+  }),
+})
+
+function changeEvent(event) {
+  emit("change", props.name, state.value, props.lang, props.index)
+}
+function changeEventTextarea(event) {
+  state.value = event.target.value
+  emit("change", props.name, state.value, props.lang, props.index)
+}
+
+onBeforeMount(() => {
+  let toolbarActions = {
+    heading: "h1",
+    bold: "b",
+    italic: "i",
+    underline: "u",
+    numberedList: "ol",
+    bulletedList: "ul",
+    blockQuote: "blockquote",
+    link: "a",
+    insertTable: "table",
+    imageUpload: "img",
+  }
+
+  let defaultSet = [
+    "heading",
+    "|",
+    "bold",
+    "italic",
+    "underline",
+    "|",
+    "alignment",
+    "numberedList",
+    "bulletedList",
+    "blockQuote",
+    "|",
+    "indent",
+    "outdent",
+    "|",
+    "link",
+    "insertTable",
+    "imageUpload",
+    "|",
+    "undo",
+    "redo",
+    "RemoveFormat",
+    "sourceEditing",
+  ]
+
+  defaultSet = defaultSet.filter((i) => {
+    if (!Object.keys(toolbarActions).includes(i)) {
+      return true
+    }
+
+    if (boneState.bonestructure?.["valid_html"]?.["validTags"].includes(toolbarActions[i])) {
+      return true
+    }
+    if (boneState.bonestructure?.["validHtml"]?.["validTags"].includes(toolbarActions[i])) {
+      return true
+    }
+    return false
+  })
+
+  state.editorConfig = {
+    licenseKey: "GPL",
+    translations: [coreTranslations],
+    toolbar: defaultSet,
+    plugins: [
+      Essentials,
+      Heading,
+      Paragraph,
+      Bold,
+      List,
+      ImageUpload,
+      Italic,
+      Underline,
+      ImageBlock,
+      ImageInline,
+      Alignment,
+      Link,
+      BlockQuote,
+      Indent,
+      Table,
+      RemoveFormat,
+      ImageStyle,
+      ImageToolbar,
+      ImageResizeButtons,
+      IndentBlock,
+      TableToolbar,
+      TextTransformation,
+      GeneralHtmlSupport,
+      Image,
+      SourceEditing,
+      FileRepository,
+      ViURUploadAdapterPlugin,
+    ],
+    link: {
+      decorators: [
+        {
+          mode: "manual",
+          label: "Link in neuem Fester öffnen",
+          attributes: {
+            target: "_blank",
+            rel: "noopener noreferrer",
+          },
+        },
+      ],
+    },
+    image: {
+      toolbar: [
+        "imageStyle:inline",
+        "imageStyle:block",
+        "imageStyle:side",
+        "|",
+        "resizeImage:50",
+        "resizeImage:75",
+        "resizeImage:original",
+        "imageTextAlternative",
+      ],
+      resizeOptions: [
+        {
+          name: "resizeImage:original",
+          value: null,
+          icon: "original",
+        },
+        {
+          name: "resizeImage:50",
+          value: "50",
+          icon: "medium",
+        },
+        {
+          name: "resizeImage:75",
+          value: "75",
+          icon: "large",
+        },
+      ],
+    },
+    table: {
+      contentToolbar: ["tableColumn", "tableRow", "mergeTableCells"],
+    },
+    heading: {
+      options: [
+        { model: "paragraph", title: "Paragraph", class: "ck-heading_paragraph" },
+        { model: "heading1", view: "h1", title: "Heading 1", class: "ck-heading_heading1" },
+        { model: "heading2", view: "h2", title: "Heading 2", class: "ck-heading_heading2" },
+        { model: "heading3", view: "h3", title: "Heading 3", class: "ck-heading_heading3" },
+        { model: "heading4", view: "h4", title: "Heading 4", class: "ck-heading_heading4" },
+        { model: "heading5", view: "h5", title: "Heading 5", class: "ck-heading_heading5" },
+        { model: "heading6", view: "h6", title: "Heading 6", class: "ck-heading_heading6" },
+      ],
+    },
+    alignment: {
+      options: [
+        { name: "left", className: "viur-txt-align--left" },
+        { name: "right", className: "viur-txt-align--right" },
+        { name: "center", className: "viur-txt-align--center" },
+        { name: "justify", className: "viur-txt-align--justify" },
+      ],
+    },
+    indentBlock: {
+      classes: [
+        "viur-txt-indent--1",
+        "viur-txt-indent--2",
+        "viur-txt-indent--3",
+        "viur-txt-indent--4",
+        "viur-txt-indent--5",
+        "viur-txt-indent--6",
+        "viur-txt-indent--7",
+        "viur-txt-indent--8",
+        "viur-txt-indent--9",
+        "viur-txt-indent--10",
+      ],
+    },
+
+    htmlSupport: {
+      allow: [
+        {
+          name: "a",
+          attributes: {
+            target: true,
+            rel: true,
+          },
+        },
+      ],
+    },
+    language: "de",
+    viur_api_url: import.meta.env.VITE_API_URL ? import.meta.env.VITE_API_URL : window.location.origin,
+  }
+})
+
+onMounted(() => {
+  if (props.value !== null) {
+    state.value = props.value
+  }
+
+  emit("change", props.name, props.value, props.lang, props.index) //init
+})
+
+function onReady(editor) {
+  editor.editing.view.change((writer) => {
+    writer.setStyle("min-height", "250px", editor.editing.view.document.getRoot())
+  })
+
+  const codePlugin = editor.plugins.get("SourceEditing")
+
+  codePlugin.on("change:isSourceEditingMode", (_eventInfo, _name, value) => {
+    if (value) {
+      const sourceEditingTextarea = editor.editing.view.getDomRoot()?.nextSibling?.firstChild
+      sourceEditingTextarea.addEventListener("focusout", (event) => {
+        if (event.relatedTarget?.classList.contains("ck")) {
+          return
+        }
+        codePlugin.isSourceEditingMode = false
+      })
+    }
+  })
+}
+
+watch(
+  () => props.value,
+  (newVal, oldVal) => {
+    if (!newVal) {
+      state.value = ""
+    } else {
+      state.value = newVal
+    }
+  }
+)
+</script>
+<style scoped>
+.bone-widget-text-hidden {
+  max-height: 0;
+  display: block;
+  visibility: hidden;
+  width: 100%;
+  pointer-events: none;
+}
+</style>
+<style>
+.viur-txt-align--left {
+  text-align: left;
+}
+.viur-txt-align--right {
+  text-align: right;
+}
+.viur-txt-align--center {
+  text-align: center;
+}
+.viur-txt-align--justify {
+  text-align: justify;
+}
+.viur-txt-indent--1 {
+  margin-left: 1em;
+}
+.viur-txt-indent--2 {
+  margin-left: 2em;
+}
+.viur-txt-indent--3 {
+  margin-left: 3em;
+}
+.viur-txt-indent--4 {
+  margin-left: 4em;
+}
+.viur-txt-indent--5 {
+  margin-left: 5em;
+}
+.viur-txt-indent--6 {
+  margin-left: 6em;
+}
+.viur-txt-indent--7 {
+  margin-left: 7em;
+}
+.viur-txt-indent--8 {
+  margin-left: 8em;
+}
+.viur-txt-indent--9 {
+  margin-left: 9em;
+}
+.viur-txt-indent--10 {
+  margin-left: 10em;
+}
+
+.bone-inner-wrap {
+  .ck-editor {
+    /* Overrides the border radius setting in the theme. */
+    --ck-border-radius: 0px;
+
+    /* Overrides the default font size in the theme. */
+    --ck-font-size-base: 14px;
+
+    /* Helper variables to avoid duplication in the colors. */
+    --ck-custom-background: var(--wa-color-neutral-90);
+    --ck-custom-foreground: var(--wa-color-neutral-10);
+    --ck-custom-border: var(--wa-color-neutral-95);
+    --ck-custom-white: var(--wa-color-neutral-95);
+
+    /* -- Overrides generic colors. ------------------------------------------------------------- */
+    --ck-color-base-foreground: var(--ck-custom-background);
+    --ck-color-base-background: var(--ck-custom-background);
+    --ck-color-base-border: var(--wa-color-neutral-80);
+    --ck-color-focus-border: var(--wa-color-neutral-40);
+    --ck-color-text: var(--wa-color-neutral-10);
+    --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2);
+    --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);
+
+    /* -- Overrides the default .ck-button class colors. ---------------------------------------- */
+    --ck-color-button-default-background: var(--ck-custom-background);
+    --ck-color-button-default-hover-background: var(--wa-color-neutral-95);
+    --ck-color-button-default-active-background: var(--wa-color-neutral-95);
+    --ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
+    --ck-color-button-default-disabled-background: var(--ck-custom-background);
+
+    --ck-color-button-on-hover-background: var(--wa-color-neutral-95);
+    --ck-color-button-on-active-background: hsl(255, 4%, 14%);
+    --ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
+    --ck-color-button-on-disabled-background: var(--ck-custom-foreground);
+
+    --ck-color-button-on-color: var(--wa-color-brand-50);
+    --ck-color-button-on-background: var(--wa-color-neutral-95);
+    --ck-focus-ring: 1px solid var(--wa-color-brand-50);
+    --ck-focus-outer-shadow: none;
+
+    --ck-powered-by-text-color: var(--ck-custom-foreground);
+    --ck-powered-by-background: var(--ck-custom-background);
+
+    --ck-color-button-action-background: var(--wa-color-brand-60);
+    --ck-color-button-action-hover-background: var(--wa-color-brand-50);
+    --ck-color-button-action-active-background: var(--wa-color-brand-50);
+    --ck-color-button-action-active-shadow: var(--wa-color-brand-50);
+    --ck-color-button-action-disabled-background: var(--wa-color-brand-60);
+    --ck-color-button-action-text: var(--ck-custom-white);
+
+    /* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */
+    --ck-color-dropdown-panel-background: var(--ck-custom-background);
+    --ck-color-dropdown-panel-border: var(--wa-color-neutral-70);
+
+    /* -- Overrides the default .ck-splitbutton class colors. ----------------------------------- */
+    --ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background);
+    --ck-color-split-button-hover-border: var(--ck-custom-foreground);
+
+    /* -- Overrides the default .ck-labeled-field-view class colors. ---------------------------- */
+    --ck-color-labeled-field-label-background: var(--ck-custom-background);
+
+    /* -- Overrides the default .ck-list class colors. ------------------------------------------ */
+    --ck-color-list-background: var(--ck-custom-background);
+    --ck-color-list-button-hover-background: var(--wa-color-neutral-95);
+    --ck-color-list-button-on-background: var(--wa-color-brand-50);
+    --ck-color-list-button-on-background-focus: var(--wa-color-brand-50);
+    --ck-color-list-button-on-text: var(--ck-color-base-background);
+
+    /* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
+    --ck-color-panel-background: var(--ck-custom-background);
+    --ck-color-panel-border: var(--ck-custom-border);
+
+    /* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */
+    --ck-color-toolbar-background: var(--ck-custom-background);
+    --ck-color-toolbar-border: var(--ck-custom-border);
+
+    /* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */
+    --ck-color-tooltip-background: hsl(252, 7%, 14%);
+    --ck-color-tooltip-text: hsl(0, 0%, 93%);
+
+    /* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */
+    --ck-color-image-caption-background: var(--ck-custom-background);
+    --ck-color-image-caption-text: var(--ck-custom-foreground);
+
+    /* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
+    --ck-color-link-default: var(--wa-color-brand-50);
+
+    width: 100% !important;
+
+    .ck-content {
+      background: transparent !important;
+      border: 1px solid var(--vi-border-color) !important;
+      width: 100%;
+      /*height: 250px;*/
+      border-bottom-left-radius: var(--wa-border-radius-m) !important;
+      border-bottom-right-radius: var(--wa-border-radius-m) !important;
+
+      &.ck-focused {
+        border: 1px solid var(--wa-color-neutral-50) !important;
+
+        .ck-source-editing-area {
+          & textarea,
+          & td {
+            border: 1px solid var(--wa-color-neutral-50) !important;
+          }
+        }
+      }
+
+      h1 {
+        font-size: 1.6em;
+        font-weight: 700;
+      }
+
+      h2 {
+        font-size: 1.5em;
+        font-weight: 700;
+      }
+
+      h3 {
+        font-size: 1.4em;
+        font-weight: 700;
+      }
+
+      h4 {
+        font-size: 1.3em;
+        font-weight: 700;
+      }
+
+      h5 {
+        font-size: 1.2em;
+        font-weight: 700;
+      }
+
+      h6 {
+        font-size: 1.1em;
+        font-weight: 700;
+      }
+
+      a:hover {
+        text-decoration: underline;
+      }
+
+      ul {
+        list-style: disc;
+        padding-left: var(--wa-space-m);
+        list-style-position: inside;
+      }
+
+      ol {
+        padding-left: var(--wa-space-m);
+        list-style-position: inside;
+      }
+    }
+
+    .ck-toolbar {
+      height: var(--wa-form-control-height);
+      border-color: var(--vi-border-color);
+      background-color: var(--vi-background-color);
+    }
+
+    .ck-button {
+      border-color: none;
+      background-color: var(--vi-background-color);
+      cursor: pointer;
+
+      &:hover {
+        background-color: var(--wa-color-neutral-90) !important;
+      }
+
+      &.ck-on {
+        background-color: var(--vi-background-color) !important;
+        border: 1px solid var(--wa-color-brand-50) !important;
+        color: var(--wa-color-brand-50) !important;
+      }
+    }
+
+    .ck-source-editing-area {
+      width: 100%;
+      /*height: 250px;*/
+
+      & textarea {
+        background-color: transparent;
+        color: var(--ck-custom-foreground);
+        border: 1px solid var(--vi-border-color) !important;
+        border-bottom-left-radius: var(--wa-border-radius-m) !important;
+        border-bottom-right-radius: var(--wa-border-radius-m) !important;
+      }
+    }
+  }
+  .ck-content .table {
+    margin: 0.9em 0;
+  }
+}
+
+.ck-body-wrapper {
+  .ck-link-form {
+    padding-top: 5px !important;
+    width: 500px !important;
+    max-width: 37vw !important;
+    min-width: 180px !important;
+  }
+}
+
+wa-textarea {
+  &::part(base) {
+    box-shadow: none !important;
+    background-color: transparent;
+  }
+
+  &::part(textarea) {
+    background-color: transparent;
+    border: 1px solid var(--vi-border-color);
+    border-radius: var(--wa-border-radius-m);
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+.ck-list-bogus-paragraph {
+  display: inline !important;
+}
+</style>

package/src/forms/install.d.ts

@@ -0,0 +1,4 @@
+import type { App } from "vue"
+
+/** Registriert die global per Namen genutzten Formular-Wrapper (`<bone>` usw.). */
+export declare function installViurForms(app: App): void

package/src/forms/install.js

@@ -0,0 +1,43 @@
+import { defineAsyncComponent } from "vue"
+
+// --------------------------------------------------------------------------- //
+// Global registration of the form wrappers                                    //
+// --------------------------------------------------------------------------- //
+//
+// The form templates reference their wrappers by NAME (`<bone>`, `<bone-label>`,
+// `<bone-actions>`, …). Vue resolves those names in the scope of the component
+// that RENDERS them — inside this package — so a consumer app has to register
+// them GLOBALLY. The bone widgets themselves are resolved dynamically through
+// the bone store and need no registration.
+//
+// Registration is async on purpose: the form tree is large (every bone widget,
+// plus their editors), and an app that merely embeds a login must not pay for
+// it on every page load. `defineAsyncComponent` defers each import until a
+// form is actually rendered.
+//
+// Keeping the list here instead of in every consumer means a rename inside the
+// package cannot silently break the apps that embed the forms.
+//
+//   import { installViurForms } from "viur-ui/src/forms/install.js"
+//   installViurForms(app)
+//
+const components = {
+  ViForm: () => import("./ViForm.vue"),
+  "vi-form": () => import("./ViForm.vue"),
+  "vi-form-category": () => import("./ViFormCategory.vue"),
+  Bone: () => import("./bones/Bone.vue"),
+  bone: () => import("./bones/Bone.vue"),
+  "bone-label": () => import("./bones/BoneLabel.vue"),
+  "bone-actions": () => import("./bones/BoneActions.vue"),
+  "bone-single-entry": () => import("./bones/BoneSingleEntry.vue"),
+  "bone-multiple-list": () => import("./bones/BoneMultipleList.vue"),
+  "bone-multiple-wrapper": () => import("./bones/BoneMultipleWrapper.vue"),
+  "bone-nested-wrapper": () => import("./bones/BoneNestedWrapper.vue"),
+}
+
+/** @param {import("vue").App} app */
+export function installViurForms(app) {
+  for (const [name, loader] of Object.entries(components)) {
+    if (!app.component(name)) app.component(name, defineAsyncComponent(loader))
+  }
+}