origam 2.5.0 → 2.6.2

package/dist/src/components/Chart/OrigamChartTooltip.vue

@@ -24,7 +24,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed
 } from "vue";

package/dist/src/components/Chart/OrigamChartTreemap.vue

@@ -2,7 +2,7 @@
 	<div
 			class="origam-chart-treemap"
 			:class="rootClasses"
-			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles]"
+			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
 			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-treemap"
@@ -157,7 +157,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   ref
@@ -165,6 +165,7 @@ import {
 import OrigamChartLegend from "./OrigamChartLegend.vue";
 import OrigamChartTooltip from "./OrigamChartTooltip.vue";
 import {
+  useChartHeaderTypography,
   useBackgroundColor,
   useDimension,
   useElevation,
@@ -220,7 +221,9 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
 const { dimensionStyles } = useDimension(props);
@@ -229,6 +232,7 @@ const { elevationClasses, elevationStyles } = useElevation(props);
 const { marginStyles } = useMargin(props);
 const { paddingStyles } = usePadding(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
+const { headerTypographyStyles } = useChartHeaderTypography(props);
 const SVG_WIDTH = 600;
 const SVG_HEIGHT = 400;
 const PADDING = { top: 8, right: 8, bottom: 8, left: 8 };

package/dist/src/components/Chart/OrigamChartVariwide.vue

@@ -2,7 +2,7 @@
 	<div
 			class="origam-chart-variwide"
 			:class="rootClasses"
-			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles]"
+			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
 			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-variwide"
@@ -232,7 +232,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   ref
@@ -240,6 +240,7 @@ import {
 import OrigamChartLegend from "./OrigamChartLegend.vue";
 import OrigamChartTooltip from "./OrigamChartTooltip.vue";
 import {
+  useChartHeaderTypography,
   useBackgroundColor,
   useDimension,
   useElevation,
@@ -300,7 +301,9 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
 const { dimensionStyles } = useDimension(props);
@@ -309,6 +312,7 @@ const { elevationClasses, elevationStyles } = useElevation(props);
 const { marginStyles } = useMargin(props);
 const { paddingStyles } = usePadding(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
+const { headerTypographyStyles } = useChartHeaderTypography(props);
 const SVG_WIDTH = 600;
 const SVG_HEIGHT = 400;
 const TICK_SIZE = 4;

package/dist/src/components/Chart/OrigamChartWordCloud.vue

@@ -130,7 +130,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   ref
@@ -197,7 +197,8 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  fontSize: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
 const { dimensionStyles } = useDimension(props);

package/dist/src/components/Checkbox/OrigamCheckbox.vue

@@ -55,10 +55,12 @@
 	</origam-input>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamCheckboxBtn, OrigamInput } from "../../components";
 import {
   useFocus,
+  useMargin,
+  usePadding,
   useProps,
   useStyle,
   useVModel
@@ -116,7 +118,7 @@ const props = defineProps({
   width: { type: [Number, String], required: false },
   direction: { type: null, required: false },
   disabled: { type: Boolean, required: false },
-  error: { type: Boolean, required: false },
+  error: { type: [String, Boolean], required: false },
   errorMessages: { type: [Array, String], required: false },
   maxErrors: { type: [Number, String], required: false },
   name: { type: String, required: false },
@@ -132,12 +134,19 @@ const props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   size: { type: null, required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false },
   indeterminate: { type: Boolean, required: false },
   indeterminateIcon: { type: null, required: false },
   trueValue: { type: null, required: false },
   falseValue: { type: null, required: false },
   value: { type: null, required: false },
   required: { type: Boolean, required: false },
+  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   inline: { type: Boolean, required: false },
   falseIcon: { type: null, required: false },
   trueIcon: { type: null, required: false },
@@ -172,14 +181,20 @@ const inputProps = computed(() => {
 const checkboxBtnProps = computed(() => {
   return origamCheckboxBtnRef.value?.filterProps(props, ["class", "style", "modelValue", "id", "disabled", "readonly", "error"]);
 });
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
 const checkboxStyles = computed(() => {
   return [
+    paddingStyles.value,
+    marginStyles.value,
     props.style
   ];
 });
 const checkboxClasses = computed(() => {
   return [
     "origam-checkbox",
+    paddingClasses.value,
+    marginClasses.value,
     props.class
   ];
 });
@@ -202,7 +217,7 @@ defineExpose({
 		}
 
 		.origam-selection-control {
-			min-height: calc(56px + 2 * var(--origam-input---density));
+			min-height: calc(56px + 2 * var(--origam-input---density, 0px));
 		}
 	}
 </style>

package/dist/src/components/Checkbox/OrigamCheckboxBtn.vue

@@ -38,7 +38,7 @@
 	</origam-selection-control>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamSelectionControl } from "../../components";
 import {
   useProps,
@@ -58,8 +58,10 @@ const props = defineProps({
   falseValue: { type: null, required: false },
   value: { type: null, required: false },
   required: { type: Boolean, required: false },
+  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   disabled: { type: Boolean, required: false },
-  error: { type: Boolean, required: false },
+  error: { type: [String, Boolean], required: false },
   inline: { type: Boolean, required: false },
   falseIcon: { type: null, required: false, default: MDI_ICONS.CHECKBOX_BLANK_OUTLINE },
   trueIcon: { type: null, required: false, default: MDI_ICONS.CHECKBOX_MARKED_OUTLINE },

package/dist/src/components/Chip/OrigamChip.vue

@@ -2,6 +2,7 @@
 	<component
 			:is="link.tag"
 			v-ripple="rippleProps"
+			v-contrast
 			:class="chipClasses"
 			:disabled="disabled"
 			:draggable="draggable"
@@ -93,12 +94,16 @@
 			</slot>
 		</div>
 
-		<button
+		<origam-btn
 				v-if="hasClose"
 				key="close"
 				:aria-label="t(closeLabel)"
 				class="origam-chip__close"
-				type="button"
+				variant="text"
+				:icon="true"
+				size="x-small"
+				density="compact"
+				:style="{'--origam-btn---min-width': '0', '--origam-btn---min-height': '0'}"
 				@click.stop="handleClickClose"
 		>
 			<slot
@@ -114,13 +119,13 @@
 						size="x-small"
 				/>
 			</slot>
-		</button>
+		</origam-btn>
 
 	</component>
 </template>
 
-<script setup>
-import { OrigamAvatar, OrigamExpandX, OrigamIcon } from "../../components";
+<script lang="ts" setup>
+import { OrigamAvatar, OrigamBtn, OrigamExpandX, OrigamIcon } from "../../components";
 import {
   useAdjacent,
   useBothColor,
@@ -134,10 +139,11 @@ import {
   useSize,
   useStateEffect,
   useStyle,
+  useTypography,
   useVModel
 } from "../../composables";
 import { ORIGAM_CHIP_GROUP_KEY } from "../../consts";
-import { vRipple } from "../../directives";
+import { vContrast, vRipple } from "../../directives";
 import { KEYBOARD_VALUES, MDI_ICONS, SIZES } from "../../enums";
 import { computed, StyleValue, toRef, useAttrs, useSlots } from "vue";
 const _props = defineProps({
@@ -203,7 +209,12 @@ const _props = defineProps({
   elevation: { type: [Number, String], required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
-  hover: { type: [Boolean, Object], required: false }
+  hover: { type: [Boolean, Object], required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
 });
 const props = useDefaults(_props);
 const emits = defineEmits(["update:modelValue", "click", "click:close", "click:append", "click:prepend", "group:selected"]);
@@ -225,6 +236,7 @@ const {
   marginStyles
 } = useStateEffect(props, isHover, void 0, hoverState, void 0);
 const { sizeClasses, sizeStyles } = useSize(props);
+const { typographyStyles } = useTypography(props, "chip");
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const isActive = useVModel(props, "modelValue");
 const group = useGroupItem(props, ORIGAM_CHIP_GROUP_KEY, false);
@@ -292,6 +304,7 @@ const chipStyles = computed(() => {
     paddingStyles.value,
     marginStyles.value,
     colorStyles.value,
+    typographyStyles.value,
     props.style
   ];
 });
@@ -412,35 +425,35 @@ defineExpose({
 		}
 
 		&--size-x-small {
-			font-size: var(--origam-chip---font-size-xs, 0.625rem);
+			font-size: var(--origam-chip---font-size, var(--origam-chip---font-size-xs, 0.625rem));
 			line-height: 1;
 			height: var(--origam-chip---height-xs, 20px);
 			padding: 0 var(--origam-chip---padding-xs, 8px);
 		}
 
 		&--size-small {
-			font-size: var(--origam-chip---font-size-sm, 0.75rem);
+			font-size: var(--origam-chip---font-size, var(--origam-chip---font-size-sm, 0.75rem));
 			line-height: 1;
 			height: var(--origam-chip---height-sm, 24px);
 			padding: 0 var(--origam-chip---padding-sm, 10px);
 		}
 
 		&--size-default {
-			font-size: var(--origam-chip---font-size-md, 0.875rem);
+			font-size: var(--origam-chip---font-size, var(--origam-chip---font-size-md, 0.875rem));
 			line-height: 1;
 			height: var(--origam-chip---height-md, 32px);
 			padding: 0 var(--origam-chip---padding-md, 12px);
 		}
 
 		&--size-large {
-			font-size: var(--origam-chip---font-size-lg, 1rem);
+			font-size: var(--origam-chip---font-size, var(--origam-chip---font-size-lg, 1rem));
 			line-height: 1;
 			height: var(--origam-chip---height-lg, 38px);
 			padding: 0 var(--origam-chip---padding-lg, 14px);
 		}
 
 		&--size-x-large {
-			font-size: var(--origam-chip---font-size-xl, 1.125rem);
+			font-size: var(--origam-chip---font-size, var(--origam-chip---font-size-xl, 1.125rem));
 			line-height: 1;
 			height: var(--origam-chip---height-xl, 44px);
 			padding: 0 var(--origam-chip---padding-xl, 17px);

package/dist/src/components/Chip/OrigamChipGroup.vue

@@ -14,7 +14,7 @@
 	</origam-slide-group>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamDefaultsProvider, OrigamSlideGroup } from "../../components";
 import { useBorder, useGroup, useMargin, usePadding, useProps, useRounded, useStyle } from "../../composables";
 import { ORIGAM_CHIP_GROUP_KEY } from "../../consts";
@@ -24,6 +24,8 @@ const props = defineProps({
   column: { type: Boolean, required: false },
   filter: { type: Boolean, required: false },
   valueComparator: { type: Function, required: false },
+  active: { type: Object, required: false },
+  hover: { type: Object, 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 },
@@ -83,10 +85,8 @@ const slotDefaults = computed(() => ({
   "origam-chip": {
     color: props.color,
     bgColor: props.bgColor,
-    activeColor: props.activeColor,
-    activeBgColor: props.activeBgColor,
-    hoverColor: props.hoverColor,
-    hoverBgColor: props.hoverBgColor
+    active: props.active,
+    hover: props.hover
   }
 }));
 const slideGroupProps = computed(() => {

package/dist/src/components/ClientOnly/OrigamClientOnly.vue

@@ -14,7 +14,7 @@
     </template>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { onMounted, ref } from "vue";
 defineOptions({ name: "OrigamClientOnly" });
 defineProps({

package/dist/src/components/Clipboard/OrigamClipboard.vue

@@ -15,6 +15,7 @@
 					type="button"
 					class="origam-clipboard__default-trigger"
 					:class="{ 'origam-clipboard__default-trigger--copied': copied }"
+					:style="typographyStyles"
 					:disabled="disabled"
 					:aria-label="defaultAriaLabel"
 					data-cy="origam-clipboard-default-trigger"
@@ -35,13 +36,13 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   toRef
 } from "vue";
 import { OrigamIcon } from "../Icon";
-import { useBorder, useBothColor, useClipboard, useMargin, usePadding, useRounded } from "../../composables";
+import { useBorder, useBothColor, useClipboard, useLocale, useMargin, usePadding, useRounded, useTypography } from "../../composables";
 import { MDI_ICONS } from "../../enums";
 const props = defineProps({
   value: { type: String, required: true },
@@ -82,7 +83,12 @@ const props = defineProps({
   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 }
+  paddingInline: { type: [Boolean, Number, String], required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
 });
 const emit = defineEmits(["copy", "error"]);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
@@ -90,13 +96,15 @@ const { borderClasses, borderStyles } = useBorder(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
 const { marginClasses, marginStyles } = useMargin(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
+const { typographyStyles } = useTypography(props, "clipboard__feedback");
 const { copy, copied, error } = useClipboard({
   feedbackDuration: props.feedbackDuration
 });
+const { t } = useLocale();
 const resolvedFeedbackText = computed(() => props.successText ?? props.feedbackText ?? "Copied!");
 const defaultIcon = MDI_ICONS.CONTENT_COPY;
 const defaultAriaLabel = computed(
-  () => copied.value ? "Value copied to clipboard" : "Copy to clipboard"
+  () => copied.value ? t("origam.clipboard.copiedAriaLabel", "Value copied to clipboard") : t("origam.clipboard.copyAriaLabel", "Copy to clipboard")
 );
 async function handleCopy() {
   if (props.disabled) return false;