origam 0.1.0 → 0.3.0

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

@@ -0,0 +1,562 @@
+<template>
+	<origam-input
+			ref="origamInputRef"
+			v-model="model"
+			:center-affix="isUniqueRow"
+			:class="textareaFieldClasses"
+			:focused="isFocused"
+			:style="textareaFieldStyles"
+			v-bind="{ ...rootAttrs, ...inputProps }"
+	>
+		<template
+				v-if="slots.prepend"
+				#prepend
+		>
+			<slot name="prepend"/>
+		</template>
+
+		<template #default="{id, isDisabled, isDirty, isReadonly, isValid}">
+			<origam-field
+					:id="id"
+					ref="origamFieldRef"
+					:active="isActive || isDirty"
+					:center-affix="isUniqueRow"
+					:dirty="isDirty || dirty"
+					:disabled="isDisabled"
+					:error="isValid === false"
+					:focused="isFocused"
+					:style="textareaFieldFieldStyles"
+					v-bind="{ ...fieldProps }"
+					@click="handleControlClick"
+					@mousedown="handleControlMousedown"
+					@click:clear="handleClear"
+					@click:prepend-inner="handleClickPrependInner"
+					@click:append-inner="handleClickAppendInner"
+			>
+				<template
+						v-if="slots.loader"
+						#loader
+				>
+					<slot name="loader"/>
+				</template>
+
+				<template
+						v-if="slots.prependInner"
+						#prependInner
+				>
+					<slot name="prependInner"/>
+				</template>
+
+				<template
+						v-if="slots.floatingLabel"
+						#floatingLabel
+				>
+					<slot name="floatingLabel"/>
+				</template>
+
+				<template
+						v-if="slots.label"
+						#label
+				>
+					<slot name="label"/>
+				</template>
+
+				<template
+						v-if="slots.prefix"
+						#prefix
+				>
+					<slot name="prefix"/>
+				</template>
+
+				<template #default="{class: fieldSlotClass, ...fieldSlotProps}">
+					<div
+							:class="fieldSlotClass"
+							data-no-activator=""
+					>
+						<slot
+								name="default"
+								v-bind="fieldSlotProps"
+						/>
+						<textarea
+								ref="textareaRef"
+								v-intersect="intersect"
+								:autofocus="autofocus"
+								:disabled="isDisabled"
+								:name="name"
+								:placeholder="placeholder"
+								:readonly="isReadonly"
+								:rows="rows"
+								:value="model"
+								v-bind="{ ...fieldSlotProps, ...inputAttrs }"
+								@blur="handleBlur"
+								@focus="handleFocus"
+								@input="handleInput"
+						/>
+					</div>
+					<div
+							v-if="!autoGrow"
+							ref="verticalDragger"
+							class="origam-textarea-field__grip"
+					>
+						<svg
+								aria-hidden="true"
+								height="1em"
+								preserveAspectRatio="xMidYMid meet"
+								role="img"
+								viewBox="0 0 24 24"
+								width="1em"
+								xmlns="http://www.w3.org/2000/svg"
+								xmlns:xlink="http://www.w3.org/1999/xlink"
+						>
+							<path
+									d="M21 11H3V9h18zm0 2H3v2h18z"
+									fill="currentColor"
+							></path>
+						</svg>
+					</div>
+				</template>
+
+				<template
+						v-if="slots.suffix"
+						#suffix
+				>
+					<slot name="suffix"/>
+				</template>
+
+				<template
+						v-if="slots.appendInner"
+						#appendInner
+				>
+					<slot name="appendInner"/>
+				</template>
+
+				<template
+						v-if="slots.clear"
+						#clear
+				>
+					<slot name="clear"/>
+				</template>
+			</origam-field>
+		</template>
+
+		<template
+				v-if="slots.append"
+				#append
+		>
+			<slot name="append"/>
+		</template>
+
+		<template
+				v-if="hasDetails"
+				#details="detailsSlotProps"
+		>
+			<slot
+					name="details"
+					v-bind="detailsSlotProps"
+			>
+				<origam-counter
+						:active="props.persistentCounter || isFocused"
+						:disabled="props.disabled"
+						:max="max"
+						:value="counterValue"
+				>
+					<template
+							v-if="slots.counter"
+							#default="{counter, value, max}"
+					>
+						<slot
+								name="counter"
+								v-bind="{counter, value, max}"
+						/>
+					</template>
+				</origam-counter>
+			</slot>
+		</template>
+
+		<template
+				v-if="slots.messages"
+				#messages="{hasMessages, messages}"
+		>
+			<slot
+					name="messages"
+					v-bind="{hasMessages, messages}"
+			/>
+		</template>
+
+		<template
+				v-if="slots.message"
+				#message="{message}"
+		>
+			<slot
+					name="message"
+					v-bind="{message}"
+			/>
+		</template>
+	</origam-input>
+</template>
+
+<script setup>
+import { OrigamCounter, OrigamField, OrigamInput } from "@origam/components";
+import { useAdjacentInner, useDragResizer, useFocus, useProps, useVModel } from "@origam/composables";
+import { vIntersect } from "@origam/directives";
+import { AXIS, DENSITY, MDI_ICONS } from "@origam/enums";
+import { clamp, convertToUnit, filterInputAttrs } from "@origam/utils";
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  ref,
+  shallowRef,
+  StyleValue,
+  useAttrs,
+  useSlots,
+  watch,
+  watchEffect
+} from "vue";
+const props = defineProps({
+  autoGrow: { type: Boolean, required: false },
+  autofocus: { type: Boolean, required: false },
+  counter: { type: [Boolean, Number, String], required: false },
+  counterValue: { type: [Number, Function], required: false },
+  prefix: { type: String, required: false },
+  placeholder: { type: String, required: false },
+  persistentPlaceholder: { type: Boolean, required: false },
+  persistentCounter: { type: Boolean, required: false },
+  noResize: { type: Boolean, required: false },
+  rows: { type: [Number, String], required: false, default: 3 },
+  maxRows: { type: [Number, String], required: false },
+  suffix: { type: String, required: false },
+  modelModifiers: { type: [String, Boolean], required: false },
+  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 },
+  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  density: { type: null, required: false, default: DENSITY.DEFAULT },
+  active: { type: Boolean, required: false },
+  centerAffix: { type: Boolean, required: false },
+  dirty: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  error: { type: Boolean, required: false },
+  flat: { type: Boolean, required: false },
+  label: { type: String, required: false },
+  persistentClear: { type: Boolean, required: false },
+  reverse: { type: Boolean, required: false },
+  singleLine: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  loading: { type: [Boolean, Number], required: false },
+  loadingText: { type: String, required: false },
+  tag: { type: String, required: false },
+  appendInnerAvatar: { type: String, required: false },
+  appendInnerIcon: { type: null, required: false },
+  prependInnerAvatar: { type: String, required: false },
+  prependInnerIcon: { type: null, required: false },
+  clearIcon: { type: null, required: false, default: MDI_ICONS.CLOSE_CIRCLE_OUTLINE },
+  clearable: { type: Boolean, required: false },
+  focused: { type: Boolean, required: false },
+  hideDetails: { type: [Boolean, String], required: false },
+  hideSpinButtons: { type: Boolean, required: false },
+  hint: { type: String, required: false },
+  persistentHint: { type: Boolean, required: false },
+  messages: { type: [Array, String], required: false },
+  padding: { type: [Boolean, Number, String], required: false },
+  paddingTop: { type: [Boolean, Number, String], required: false },
+  paddingLeft: { type: [Boolean, Number, String], required: false },
+  paddingBottom: { type: [Boolean, Number, String], required: false },
+  paddingRight: { type: [Boolean, Number, String], required: false },
+  paddingBlock: { type: [Boolean, Number, String], required: false },
+  paddingInline: { type: [Boolean, Number, String], required: false },
+  margin: { type: [Boolean, Number, String], required: false },
+  marginTop: { type: [Boolean, Number, String], required: false },
+  marginLeft: { type: [Boolean, Number, String], required: false },
+  marginBottom: { type: [Boolean, Number, String], required: false },
+  marginRight: { type: [Boolean, Number, String], required: false },
+  marginBlock: { type: [Boolean, Number, String], required: false },
+  marginInline: { type: [Boolean, Number, String], required: false },
+  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true, default: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: true },
+  borderTop: { type: [Boolean, Number, String], required: false },
+  borderLeft: { type: [Boolean, Number, String], required: false },
+  borderBottom: { type: [Boolean, Number, String], required: false },
+  borderRight: { type: [Boolean, Number, String], required: false },
+  borderBlock: { type: [Boolean, Number, String], required: false },
+  borderInline: { type: [Boolean, Number, String], required: false },
+  borderColor: { type: String, required: false },
+  borderStyle: { type: String, required: false },
+  elevation: { type: [Number, String], required: false },
+  height: { type: [Number, String], required: false },
+  maxHeight: { type: [Number, String], required: false },
+  maxWidth: { type: [Number, String], required: false },
+  minHeight: { type: [Number, String], required: false },
+  minWidth: { type: [Number, String], required: false },
+  width: { type: [Number, String], required: false },
+  direction: { type: null, required: false },
+  errorMessages: { type: [Array, String], required: false },
+  maxErrors: { type: [Number, String], required: false },
+  name: { type: String, required: false },
+  readonly: { type: Boolean, required: false },
+  rules: { type: Array, required: false },
+  modelValue: { type: null, required: false },
+  validateOn: { type: null, required: false },
+  validationValue: { type: null, required: false },
+  appendAvatar: { type: String, required: false },
+  appendIcon: { type: null, required: false },
+  prependAvatar: { type: String, required: false },
+  prependIcon: { type: null, required: false }
+});
+const emits = defineEmits(["click:control", "mousedown:control", "update:focused", "update:modelValue", "click:clear", "click:prepend", "click:append", "click:appendInner", "click:prependInner"]);
+const { filterProps } = useProps(props);
+const attrs = useAttrs();
+const slots = useSlots();
+const model = useVModel(props, "modelValue");
+const { isFocused, onFocus, onBlur: handleBlur } = useFocus(props);
+const {
+  onClickAppendInner: handleClickAppendInner,
+  onClickPrependInner: handleClickPrependInner
+} = useAdjacentInner(props);
+const counterValue = computed(() => {
+  return typeof props.counterValue === "function" ? props.counterValue(model.value) : (model.value || "").toString().length;
+});
+const max = computed(() => {
+  if (attrs.maxlength) return attrs.maxlength;
+  if (!props.counter || typeof props.counter !== "number" && typeof props.counter !== "string") return void 0;
+  return props.counter;
+});
+const intersect = computed(() => {
+  return [{
+    handler: handleIntersect
+  }, null, ["once"]];
+});
+const handleIntersect = (isIntersecting, entries) => {
+  if (!props.autofocus || !isIntersecting) return;
+  entries[0].target?.focus?.();
+};
+const origamInputRef = ref();
+const origamFieldRef = ref();
+const textareaRef = ref();
+const verticalDragger = ref();
+const isActive = computed(() => {
+  return props.persistentPlaceholder || isFocused.value || props.active;
+});
+const focus = () => {
+  if (textareaRef.value !== document.activeElement) {
+    textareaRef.value?.focus();
+  }
+  if (!isFocused.value) onFocus();
+};
+const handleControlClick = (e) => {
+  focus();
+  emits("click:control", e);
+};
+const handleControlMousedown = (e) => {
+  emits("mousedown:control", e);
+};
+const handleClear = (e) => {
+  e.stopPropagation();
+  focus();
+  nextTick(() => {
+    model.value = "";
+    emits("click:clear", e);
+  });
+};
+const handleInput = (e) => {
+  const el = e.target;
+  model.value = el.value;
+  if (typeof props.modelModifiers !== "boolean" && props.modelModifiers?.trim) {
+    const caretPosition = [el.selectionStart, el.selectionEnd];
+    nextTick(() => {
+      el.selectionStart = caretPosition[0];
+      el.selectionEnd = caretPosition[1];
+    });
+  }
+};
+const handleFocus = () => {
+  focus();
+};
+const rows = ref(+props.rows);
+const isUniqueRow = computed(() => {
+  return rows.value === 1;
+});
+watchEffect(() => {
+  if (!props.autoGrow) rows.value = +props.rows;
+});
+const minHeight = computed(() => {
+  if (!textareaRef.value || !origamFieldRef.value) return 0;
+  const style = getComputedStyle(textareaRef.value);
+  const fieldStyle = getComputedStyle(origamFieldRef.value.$el);
+  const padding = parseFloat(style.getPropertyValue("--origam-field---padding-top")) + parseFloat(style.getPropertyValue("--origam-input---padding-top")) + parseFloat(style.getPropertyValue("--origam-field---padding-bottom"));
+  const lineHeight = parseFloat(style.lineHeight);
+  return Math.max(
+    parseFloat(props.rows) * lineHeight + padding,
+    parseFloat(fieldStyle.getPropertyValue("--origam-input__control---height"))
+  );
+});
+const maxHeight = computed(() => {
+  if (!textareaRef.value) return 0;
+  const style = getComputedStyle(textareaRef.value);
+  const padding = parseFloat(style.getPropertyValue("--origam-field---padding-top")) + parseFloat(style.getPropertyValue("--origam-input---padding-top")) + parseFloat(style.getPropertyValue("--origam-field---padding-bottom"));
+  const lineHeight = parseFloat(style.lineHeight);
+  return parseFloat(props.maxRows) * lineHeight + padding || Infinity;
+});
+const controlHeight = shallowRef(0);
+const calculateInputHeight = () => {
+  if (!props.autoGrow) return;
+  nextTick(() => {
+    if (!textareaRef.value) return;
+    const style = getComputedStyle(textareaRef.value);
+    const padding = parseFloat(style.getPropertyValue("--origam-field---padding-top")) + parseFloat(style.getPropertyValue("--origam-input---padding-top")) + parseFloat(style.getPropertyValue("--origam-field---padding-bottom"));
+    controlHeight.value = clamp((textareaRef.value?.scrollHeight ?? 0) + padding, minHeight.value, maxHeight.value);
+  });
+};
+watch([model, () => props.maxRows, () => props.density, () => props.rows], () => {
+  calculateInputHeight();
+}, { immediate: true });
+watch(minHeight, () => {
+  controlHeight.value = minHeight.value;
+});
+watch([verticalDragger, minHeight, maxHeight], () => {
+  if (!verticalDragger.value) return;
+  useDragResizer(verticalDragger.value, controlHeight, minHeight.value, maxHeight.value, AXIS.Y);
+});
+watch(controlHeight, (newHeight) => {
+  nextTick(() => {
+    if (!textareaRef.value) return;
+    const style = getComputedStyle(textareaRef.value);
+    const padding = parseFloat(style.getPropertyValue("--origam-field---padding-top")) + parseFloat(style.getPropertyValue("--origam-input---padding-top")) + parseFloat(style.getPropertyValue("--origam-field---padding-bottom"));
+    const lineHeight = parseFloat(style.lineHeight);
+    rows.value = Math.floor((newHeight - padding) / lineHeight);
+  });
+});
+let observer;
+watch(textareaRef, (val) => {
+  if (val) {
+    observer = new ResizeObserver(calculateInputHeight);
+    observer.observe(textareaRef.value);
+  } else {
+    observer?.disconnect();
+  }
+});
+onBeforeUnmount(() => {
+  observer?.disconnect();
+});
+const hasCounter = computed(() => {
+  return slots.counter || props.counter || props.counterValue;
+});
+const hasDetails = computed(() => {
+  return hasCounter.value || slots.details;
+});
+const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
+const inputProps = computed(() => {
+  return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "id", "focused", "centerAffix"]);
+});
+const fieldProps = computed(() => {
+  return origamFieldRef.value?.filterProps(props, ["class", "id", "style", "active", "dirty", "disabled", "focused", "error", "centerAffix"]);
+});
+const textareaFieldStyles = computed(() => {
+  return [
+    props.style
+  ];
+});
+const textareaFieldClasses = computed(() => {
+  return [
+    "origam-textarea-field origam-text-field",
+    {
+      "origam-textarea-field--prefixed": props.prefix,
+      "origam-textarea-field--suffixed": props.suffix,
+      "origam-text-field--prefixed": props.prefix,
+      "origam-text-field--suffixed": props.suffix,
+      "origam-textarea-field--auto-grow": props.autoGrow,
+      "origam-textarea-field--no-resize": props.noResize || props.autoGrow
+    },
+    props.class
+  ];
+});
+const textareaFieldFieldStyles = computed(() => {
+  return {
+    "--origam-textarea-field__control---height": convertToUnit(controlHeight.value)
+  };
+});
+defineExpose({
+  filterProps
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-textarea-field {
+		$this: &;
+
+		:deep(.origam-field) {
+			--origam-textarea-field__control---height: var(--origam-input__control---height);
+
+			.origam-field__field {
+				--origam-input__control---height: var(--origam-textarea-field__control---height);
+			}
+
+			.origam-field__input {
+				flex: 1 1 auto;
+				outline: none;
+				-webkit-mask-image: linear-gradient(to bottom, transparent, transparent calc(var(--origam-field---padding-top, 0px) + calc(var(--origam-input---padding-top, 16px) + var(--origam-input---density, 0px)) - 6px), black calc(var(--origam-field---padding-top, 0px) + calc(var(--origam-input---padding-top, 16px) + var(--origam-input---density, 0px)) + 4px));
+				mask-image: linear-gradient(to bottom, transparent, transparent calc(var(--origam-field---padding-top, 0px) + calc(var(--origam-input---padding-top, 16px) + var(--origam-input---density, 0px)) - 6px), black calc(var(--origam-field---padding-top, 0px) + calc(var(--origam-input---padding-top, 16px) + var(--origam-input---density, 0px)) + 4px));
+			}
+
+			&.origam-field--no-label,
+			&.origam-field--active {
+				textarea {
+					opacity: 1;
+				}
+			}
+		}
+
+		:deep(textarea) {
+			opacity: 0;
+			flex: 1;
+			min-width: 0;
+			transition: 0.15s opacity cubic-bezier(0.4, 0, 0.2, 1);
+			line-height: 1;
+
+			&:focus,
+			&:active {
+				outline: none;
+			}
+
+			&:invalid {
+				box-shadow: none;
+			}
+		}
+
+		&--no-resize {
+			:deep(.origam-field__input) {
+				resize: none;
+			}
+		}
+
+		&__grip {
+			width: 100%;
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			border: 1px solid #ddd;
+			border-top-width: 0;
+			cursor: ns-resize;
+			height: 9px;
+			overflow: hidden;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			opacity: 0.2;
+
+			&:hover {
+				color: currentColor;
+				background-color: color-mix(in srgb, currentColor 30%, transparent)
+			}
+		}
+	}
+</style>

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "FoxyTextareaField", {
+Object.defineProperty(exports, "OrigamTextareaField", {
   enumerable: true,
   get: function () {
-    return _FoxyTextareaField.default;
+    return _OrigamTextareaField.default;
   }
 });
-var _FoxyTextareaField = _interopRequireDefault(require("./FoxyTextareaField.vue"));
+var _OrigamTextareaField = _interopRequireDefault(require("./OrigamTextareaField.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

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

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

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

package/dist/src/components/Title/OrigamTitle.cy.cjs

@@ -0,0 +1,10 @@
+"use strict";
+
+var _vue = require("vue");
+var _OrigamTitle = _interopRequireDefault(require("./OrigamTitle.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+describe("<OrigamTitle />", () => {
+  it("renders", () => {
+    cy.mount((0, _vue.h)(_OrigamTitle.default), {});
+  });
+});

package/dist/src/components/Title/OrigamTitle.cy.js

@@ -0,0 +1,7 @@
+import { h } from "vue";
+import OrigamTitle from "./OrigamTitle.vue";
+describe("<OrigamTitle />", () => {
+  it("renders", () => {
+    cy.mount(h(OrigamTitle), {});
+  });
+});

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

@@ -0,0 +1,88 @@
+<template>
+	<component
+			:is="tag"
+			:class="titleClasses"
+			:style="titleStyles"
+	>
+		<slot
+				v-if="hasContent"
+				name="default"
+		>
+			{{ text }}
+		</slot>
+	</component>
+</template>
+
+<script setup>
+import { useBorder, useBothColor, useDensity, useMargin, usePadding, useProps } from "@origam/composables";
+import { computed, StyleValue, toRef, useSlots } from "vue";
+const props = defineProps({
+  text: { type: String, required: false },
+  tag: { type: String, required: false, default: "h1" },
+  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 },
+  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  hoverBgColor: { type: [String, 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 },
+  paddingLeft: { type: [Boolean, Number, String], required: false },
+  paddingBottom: { type: [Boolean, Number, String], required: false },
+  paddingRight: { type: [Boolean, Number, String], required: false },
+  paddingBlock: { type: [Boolean, Number, String], required: false },
+  paddingInline: { type: [Boolean, Number, String], required: false },
+  margin: { type: [Boolean, Number, String], required: false },
+  marginTop: { type: [Boolean, Number, String], required: false },
+  marginLeft: { type: [Boolean, Number, String], required: false },
+  marginBottom: { type: [Boolean, Number, String], required: false },
+  marginRight: { type: [Boolean, Number, String], required: false },
+  marginBlock: { type: [Boolean, Number, String], required: false },
+  marginInline: { type: [Boolean, Number, String], required: false },
+  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
+  borderTop: { type: [Boolean, Number, String], required: false },
+  borderLeft: { type: [Boolean, Number, String], required: false },
+  borderBottom: { type: [Boolean, Number, String], required: false },
+  borderRight: { type: [Boolean, Number, String], required: false },
+  borderBlock: { type: [Boolean, Number, String], required: false },
+  borderInline: { type: [Boolean, Number, String], required: false },
+  borderColor: { type: String, required: false },
+  borderStyle: { type: String, required: false }
+});
+const { filterProps } = useProps(props);
+const { colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { densityClasses } = useDensity(props);
+const slots = useSlots();
+const { borderClasses, borderStyles } = useBorder(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const hasContent = computed(() => {
+  return slots.default || props.text;
+});
+const titleStyles = computed(() => {
+  return [
+    colorStyles.value,
+    borderStyles.value,
+    paddingStyles.value,
+    marginStyles.value,
+    props.style
+  ];
+});
+const titleClasses = computed(() => {
+  return [
+    "origam-title",
+    densityClasses.value,
+    borderClasses.value,
+    paddingClasses.value,
+    marginClasses.value,
+    props.class
+  ];
+});
+defineExpose({
+  filterProps
+});
+</script>