origam 2.2.1 → 2.5.0

package/dist/src/components/TextareaField/OrigamTextareaField.vue

@@ -79,7 +79,56 @@
 								name="default"
 								v-bind="{ref, ...fieldSlotProps}"
 						/>
+						<template v-if="isRichMode">
+							<slot
+									v-if="toolbarPosition !== TEXTAREA_TOOLBAR_POSITION.BOTTOM"
+									name="toolbar"
+									v-bind="toolbarSlotPayload"
+							>
+								<origam-rich-toolbar
+										v-if="hasToolbar"
+										:items="resolvedToolbar"
+										:active="richActive"
+										:position="toolbarPosition"
+										:disabled="isDisabled"
+										@format="handleRichFormat"
+								/>
+							</slot>
+							<div
+									ref="richHostRef"
+									class="origam-textarea-field__rich"
+									role="textbox"
+									aria-multiline="true"
+									:aria-disabled="isDisabled || undefined"
+									:aria-readonly="isReadonly || undefined"
+									:aria-label="placeholder || undefined"
+									:contenteditable="(!isDisabled && !isReadonly) ? 'true' : 'false'"
+									:data-empty="!hasRichContent"
+									:data-placeholder="placeholder || ''"
+									data-cy="origam-textarea-rich-host"
+									@input="handleRichInput"
+									@keydown="handleRichKeydown"
+									@paste="handleRichPaste"
+									@focus="handleFocus"
+									@blur="handleBlur"
+							/>
+							<slot
+									v-if="toolbarPosition === TEXTAREA_TOOLBAR_POSITION.BOTTOM"
+									name="toolbar"
+									v-bind="toolbarSlotPayload"
+							>
+								<origam-rich-toolbar
+										v-if="hasToolbar"
+										:items="resolvedToolbar"
+										:active="richActive"
+										:position="toolbarPosition"
+										:disabled="isDisabled"
+										@format="handleRichFormat"
+								/>
+							</slot>
+						</template>
 						<textarea
+								v-else
 								ref="textareaRef"
 								v-intersect="intersect"
 								:autofocus="autofocus"
@@ -87,6 +136,8 @@
 								:name="name"
 								:placeholder="placeholder"
 								:readonly="isReadonly"
+								:required="required || undefined"
+								:aria-required="required ? 'true' : undefined"
 								:rows="rows"
 								:value="model"
 								v-bind="{ ...fieldSlotProps, ...inputAttrs }"
@@ -96,7 +147,7 @@
 						/>
 					</div>
 					<div
-							v-if="!autoGrow && !noResize"
+							v-if="!autoGrow && !noResize && !isRichMode"
 							ref="verticalDragger"
 							class="origam-textarea-field__grip"
 					>
@@ -212,6 +263,7 @@ import {
   watchEffect
 } from "vue";
 import { OrigamCounter, OrigamField, OrigamInput } from "../../components";
+import OrigamRichToolbar from "./OrigamRichToolbar.vue";
 import {
   useAdjacent,
   useAdjacentInner,
@@ -221,11 +273,20 @@ import {
   useLocale,
   useProps,
   useStyle,
+  useTextareaRich,
   useVModel
 } from "../../composables";
+import { DEFAULT_TOOLBAR } from "../../consts";
 import { vIntersect } from "../../directives";
-import { AXIS, DENSITY, MDI_ICONS } from "../../enums";
-import { clamp, convertToUnit, filterInputAttrs, forwardRefs } from "../../utils";
+import {
+  AXIS,
+  DENSITY,
+  MDI_ICONS,
+  TEXTAREA_MODE,
+  TEXTAREA_OUTPUT,
+  TEXTAREA_TOOLBAR_POSITION
+} from "../../enums";
+import { clamp, convertToUnit, filterInputAttrs, forwardRefs, htmlToMarkdown, sanitizeHtml } from "../../utils";
 const _props = defineProps({
   autoGrow: { type: Boolean, required: false },
   autofocus: { type: Boolean, required: false },
@@ -241,10 +302,14 @@ const _props = defineProps({
   maxRows: { type: [Number, String], required: false },
   suffix: { type: String, required: false },
   modelModifiers: { type: [String, Boolean], required: false },
+  mode: { type: null, required: false, default: TEXTAREA_MODE.PLAIN },
+  output: { type: null, required: false, default: TEXTAREA_OUTPUT.HTML },
+  toolbar: { type: [Array, Boolean], required: false, default: () => DEFAULT_TOOLBAR },
+  toolbarPosition: { type: null, required: false, default: TEXTAREA_TOOLBAR_POSITION.TOP },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   centerAffix: { type: Boolean, required: false },
   dirty: { type: Boolean, required: false },
@@ -259,7 +324,7 @@ const _props = defineProps({
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   appendInnerAvatar: { type: String, required: false },
   appendInnerIcon: { type: null, required: false },
   prependInnerAvatar: { type: String, required: false },
@@ -328,12 +393,71 @@ const _props = defineProps({
   prependIcon: { type: null, required: false }
 });
 const props = useDefaults(_props);
-const emits = defineEmits(["update:height", "click:control", "mousedown:control", "update:focused", "update:modelValue", "click:appendInner", "click:prependInner", "click:clear", "update:active", "click:append", "click:prepend"]);
+const emits = defineEmits(["update:height", "click:control", "mousedown:control", "format", "update:focused", "update:modelValue", "click:appendInner", "click:prependInner", "click:clear", "update:active", "click:append", "click:prepend"]);
 defineSlots();
 const slots = useSlots();
 const attrs = useAttrs();
 const { t } = useLocale();
 const model = useVModel(props, "modelValue");
+const isRichMode = computed(() => props.mode === TEXTAREA_MODE.RICH);
+const hasToolbar = computed(() => props.toolbar !== false && resolvedToolbar.value.length > 0);
+const resolvedToolbar = computed(() => {
+  if (props.toolbar === false) return [];
+  return Array.isArray(props.toolbar) ? props.toolbar : DEFAULT_TOOLBAR;
+});
+let isApplyingExternal = false;
+const richInitialHtml = computed(() => {
+  if (!isRichMode.value) return "";
+  const v = (model.value ?? "").toString();
+  return sanitizeHtml(v);
+});
+const rich = useTextareaRich({
+  disabled: () => !!attrs.disabled || !!props.readonly,
+  value: () => richInitialHtml.value,
+  onUpdate: (html) => {
+    if (isApplyingExternal) return;
+    const next = props.output === TEXTAREA_OUTPUT.MARKDOWN ? htmlToMarkdown(html) : html;
+    if (model.value !== next) model.value = next;
+  },
+  onFormat: (command, value) => {
+    emits("format", command, value);
+  }
+});
+const richHostRef = rich.hostRef;
+const richActive = rich.active;
+const handleRichInput = rich.onInput;
+const handleRichKeydown = rich.onKeydown;
+const handleRichPaste = rich.onPaste;
+const handleRichFormat = (command, value) => {
+  rich.format(command, value);
+};
+const hasRichContent = computed(() => {
+  const v = (model.value ?? "").toString().trim();
+  return v !== "";
+});
+const toolbarSlotPayload = computed(() => ({
+  format: rich.format,
+  isFormat: rich.isFormatActive,
+  items: resolvedToolbar.value,
+  active: richActive
+}));
+watch(() => model.value, (next) => {
+  if (!isRichMode.value || !richHostRef.value) return;
+  if (props.output === TEXTAREA_OUTPUT.MARKDOWN) {
+    if (!richHostRef.value.innerHTML) {
+      isApplyingExternal = true;
+      rich.setValue(sanitizeHtml((next ?? "").toString()));
+      isApplyingExternal = false;
+    }
+    return;
+  }
+  const cleaned = sanitizeHtml((next ?? "").toString());
+  if (richHostRef.value.innerHTML !== cleaned) {
+    isApplyingExternal = true;
+    rich.setValue(cleaned);
+    isApplyingExternal = false;
+  }
+});
 const {
   onClickAppendInner: handleClickAppendInner,
   onClickPrependInner: handleClickPrependInner
@@ -437,7 +561,7 @@ const maxHeight = computed(() => {
 });
 const controlHeight = shallowRef(0);
 const calculateInputHeight = () => {
-  if (!props.autoGrow) return;
+  if (!props.autoGrow || isRichMode.value) return;
   nextTick(() => {
     if (!textareaRef.value) return;
     const padding = getPadding(getComputedStyle(textareaRef.value));
@@ -622,5 +746,70 @@ defineExpose(forwardRefs({
 				background-color: color-mix(in srgb, currentColor 30%, transparent)
 			}
 		}
+
+		&__rich {
+			flex: 1 1 auto;
+			width: 100%;
+			min-height: var(--origam-textarea-field__rich-content---min-height);
+			padding: var(--origam-textarea-field__rich-content---padding);
+			outline: none;
+			line-height: var(--origam-textarea-field__rich-content---line-height);
+			color: inherit;
+			white-space: pre-wrap;
+			word-break: break-word;
+			overflow-wrap: anywhere;
+
+			&[data-empty="true"]::before {
+				content: attr(data-placeholder);
+				color: var(--origam-textarea-field__rich-content---placeholder-color);
+				pointer-events: none;
+			}
+
+			:deep(p) {
+				margin: 0 0 var(--origam-textarea-field__rich-content---paragraph-gap);
+			}
+
+			:deep(p:last-child) {
+				margin-bottom: 0;
+			}
+
+			:deep(a) {
+				color: var(--origam-textarea-field__rich-link---color);
+				text-decoration: var(--origam-textarea-field__rich-link---text-decoration);
+			}
+
+			:deep(code) {
+				background-color: var(--origam-textarea-field__rich-code-inline---bg-color);
+				color: var(--origam-textarea-field__rich-code-inline---color);
+				padding: 0.1em 0.35em;
+				border-radius: 3px;
+				font-family: var(--origam-font---code, ui-monospace, SFMono-Regular, monospace);
+				font-size: 0.92em;
+			}
+
+			:deep(ul),
+			:deep(ol) {
+				margin: 0 0 var(--origam-textarea-field__rich-content---paragraph-gap);
+				padding-inline-start: var(--origam-textarea-field__rich-list---padding-inline-start);
+			}
+
+			:deep(h1) {
+				font-size: var(--origam-textarea-field__rich-heading---font-size-h1);
+				font-weight: 700;
+				margin: 0 0 var(--origam-textarea-field__rich-content---paragraph-gap);
+			}
+
+			:deep(h2) {
+				font-size: var(--origam-textarea-field__rich-heading---font-size-h2);
+				font-weight: 700;
+				margin: 0 0 var(--origam-textarea-field__rich-content---paragraph-gap);
+			}
+
+			:deep(h3) {
+				font-size: var(--origam-textarea-field__rich-heading---font-size-h3);
+				font-weight: 600;
+				margin: 0 0 var(--origam-textarea-field__rich-content---paragraph-gap);
+			}
+		}
 	}
 </style>

package/dist/src/components/TextareaField/index.cjs

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "OrigamRichToolbar", {
+  enumerable: true,
+  get: function () {
+    return _OrigamRichToolbar.default;
+  }
+});
 Object.defineProperty(exports, "OrigamTextareaField", {
   enumerable: true,
   get: function () {
@@ -10,4 +16,5 @@ Object.defineProperty(exports, "OrigamTextareaField", {
   }
 });
 var _OrigamTextareaField = _interopRequireDefault(require("./OrigamTextareaField.vue"));
+var _OrigamRichToolbar = _interopRequireDefault(require("./OrigamRichToolbar.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/TextareaField/index.d.ts

@@ -1 +1,2 @@
 export { default as OrigamTextareaField } from './OrigamTextareaField.vue';
+export { default as OrigamRichToolbar } from './OrigamRichToolbar.vue';

package/dist/src/components/TextareaField/index.js

@@ -1 +1,2 @@
 export { default as OrigamTextareaField } from "./OrigamTextareaField.vue";
+export { default as OrigamRichToolbar } from "./OrigamRichToolbar.vue";

package/dist/src/components/Timeline/OrigamTimeline.vue

@@ -69,7 +69,7 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "div" },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   size: { type: null, required: false },
   density: { type: null, required: false }
 });

package/dist/src/components/Timeline/OrigamTimelineItem.vue

@@ -63,7 +63,7 @@ const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   description: { type: String, required: false, default: void 0 }
 });
 const timelineCtx = inject(TIMELINE_CONTEXT_KEY, null);

package/dist/src/components/Title/OrigamTitle.vue

@@ -30,8 +30,8 @@ const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },

package/dist/src/components/Toolbar/OrigamToolbar.vue

@@ -76,8 +76,8 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },

package/dist/src/components/Tooltip/OrigamTooltip.vue

@@ -89,8 +89,8 @@ const props = defineProps({
   eager: { type: Boolean, required: false, default: true },
   transition: { type: [Boolean, String, Object], required: false, default: false },
   scrim: { type: [Boolean, String], required: false, default: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true }
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
 defineEmits(["update:modelValue"]);
 const { filterProps } = useProps(props);

package/dist/src/components/Treeview/OrigamTreeview.vue

@@ -41,8 +41,8 @@ const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   size: { type: null, required: false, default: SIZES.DEFAULT },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   ariaLabel: { type: String, required: false, default: void 0 }
@@ -146,8 +146,6 @@ const treeviewStyles = computed(() => {
 const treeviewClasses = computed(() => [
   "origam-treeview",
   colorClasses.value,
-  hoverState,
-  activeState,
   densityClasses.value,
   sizeClasses.value,
   props.class