origam 0.3.9 → 2.2.1

package/dist/src/components/ContextualMenu/OrigamContextualMenu.vue

@@ -9,12 +9,22 @@
 			open-on-context-menu
 			target="cursor"
 			v-bind="menuProps"
-	/>
+	>
+		<template
+				v-for="(_, name) in $slots"
+				#[name]="slotProps"
+		>
+			<slot
+					:name="name"
+					v-bind="slotProps || {}"
+			/>
+		</template>
+	</origam-menu>
 </template>
 
 <script setup>
 import { OrigamMenu, OrigamTranslateScale } from "../../components";
-import { useProps, useVModel } from "../../composables";
+import { useProps, useVModel, useStyle } from "../../composables";
 import { INLINE, LOCATION_STRATEGIES, SCROLL_STRATEGIES } from "../../enums";
 import { forwardRefs } from "../../utils";
 import { computed, ref, StyleValue } from "vue";
@@ -53,6 +63,7 @@ const props = defineProps({
   location: { type: null, required: false, default: INLINE.RIGHT },
   origin: { type: null, required: false },
   offset: { type: [Number, String, Array], required: false, default: 8 },
+  viewportMargin: { type: Number, required: false },
   scrollStrategy: { type: Function, required: false, skipCheck: true, default: SCROLL_STRATEGIES.REPOSITION },
   contained: { type: Boolean, required: false },
   eager: { type: Boolean, required: false },
@@ -77,7 +88,7 @@ const props = defineProps({
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
   density: { type: null, required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
@@ -96,10 +107,6 @@ const props = defineProps({
   valueComparator: { type: null, required: false },
   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 },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },
@@ -127,7 +134,8 @@ const props = defineProps({
   appendAvatar: { type: String, required: false },
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
-  prependIcon: { type: null, required: false }
+  prependIcon: { type: null, required: false },
+  hover: { type: [Boolean, Object], required: false }
 });
 const { filterProps } = useProps(props);
 const modelValue = useVModel(props, "modelValue", false);
@@ -146,5 +154,13 @@ const contextualMenuClasses = computed(() => {
     props.class
   ];
 });
-defineExpose(forwardRefs({ filterProps }, origamMenuRef));
+const { id, css, load, isLoaded, unload } = useStyle(contextualMenuStyles);
+defineExpose(forwardRefs({
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
+}, origamMenuRef));
 </script>

package/dist/src/components/Counter/OrigamCounter.vue

@@ -11,7 +11,7 @@
 		>
 			<slot
 					name="default"
-					v-bind="{ counter, max: props.max, value: props.value}"
+					v-bind="{ counter, max: max, value: value}"
 			>
 				{{ counter }}
 			</slot>
@@ -21,8 +21,8 @@
 
 <script setup>
 import { OrigamSlideY, OrigamTransition } from "../../components";
-import { useProps, useSsrBoot } from "../../composables";
-import { computed, StyleValue } from "vue";
+import { useBothColor, useProps, useSsrBoot, useStyle } from "../../composables";
+import { computed, StyleValue, toRef } from "vue";
 const props = defineProps({
   active: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
@@ -55,28 +55,25 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: 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 },
   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 },
   elevation: { type: [Number, String], required: false },
   density: { type: null, required: false },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamSlideY }) }
 });
 const { filterProps } = useProps(props);
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { isBooted } = useSsrBoot();
 const counter = computed(() => {
   return props.max ? `${props.value} / ${props.max}` : String(props.value);
 });
 const counterStyles = computed(() => {
   return [
+    colorStyles.value,
     props.style
   ];
 });
@@ -86,11 +83,18 @@ const counterClasses = computed(() => {
     {
       "origam-counter--error": props.max && !props.disabled && parseFloat(props.value) > parseFloat(props.max)
     },
+    colorClasses.value,
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(counterStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
@@ -102,9 +106,3 @@ defineExpose({
 		transition-duration: 150ms;
 	}
 </style>
-
-<style>
-	:root {
-
-	}
-</style>

package/dist/src/components/DataList/OrigamDataList.vue

@@ -3,13 +3,72 @@
 			:class="dataListClasses"
 			:style="dataListStyles"
 	>
-		<template v-if="slots.default || hasItems">
+		<template v-if="isKvMode">
 			<slot
 					name="default"
-					v-bind="{items}"
+					v-bind="{items: kvItems}"
 			>
 				<template
-						v-for="(item, index) in items as Array<IDataItem>"
+						v-for="(item, index) in kvItems"
+						:key="item.id ?? item.key ?? index"
+				>
+					<div
+							:class="['origam-data-list__kv-row']"
+							:data-cy="`data-list-kv-row-${toKebabCase(item.key)}`"
+					>
+						<dt class="origam-data-list__kv-key">
+							<slot
+									:name="`item-${index}.key`"
+									v-bind="{key: item.key, item, index}"
+							>
+								<slot
+										name="key"
+										v-bind="{key: item.key, item, index}"
+								>
+									{{ item.key }}
+								</slot>
+							</slot>
+						</dt>
+						<dd class="origam-data-list__kv-value">
+							<slot
+									:name="`item-${index}.value`"
+									v-bind="{key: item.key, value: item.value, item, index}"
+							>
+								<slot
+										name="value"
+										v-bind="{key: item.key, value: item.value, item, index}"
+								>
+									<template v-if="isComponentValue(item.value)">
+										<component
+												:is="getComponentTag(item.value)"
+												v-bind="getComponentProps(item.value)"
+										>
+											<template v-if="getComponentChildren(item.value) !== undefined">
+												{{ getComponentChildren(item.value) }}
+											</template>
+										</component>
+									</template>
+									<template v-else-if="isVNodeValue(item.value)">
+										<component :is="item.value"/>
+									</template>
+									<template v-else>
+										{{ item.value }}
+									</template>
+								</slot>
+							</slot>
+						</dd>
+					</div>
+				</template>
+			</slot>
+		</template>
+
+		<template v-else-if="slots.default || hasItems">
+			<slot
+					name="default"
+					v-bind="{items: avatarItems}"
+			>
+				<template
+						v-for="(item, index) in avatarItems"
 						:key="index"
 				>
 					<slot
@@ -67,7 +126,7 @@
 
 							<template v-if="item.text">
 								<template
-										v-for="(data, i) in item.text as Array<IDataTextProps>"
+										v-for="(data, i) in item.text"
 										:key="i"
 								>
 									<origam-data-text
@@ -111,6 +170,7 @@
 </template>
 
 <script setup>
+import { computed, isVNode, StyleValue, toRef, useSlots } from "vue";
 import { OrigamDataText, OrigamDataTitle } from "../../components";
 import {
   useBorder,
@@ -121,11 +181,13 @@ import {
   useMargin,
   usePadding,
   useProps,
-  useRounded
+  useRounded,
+  useStyle
 } from "../../composables";
-import { isEmpty } from "../../utils";
-import { computed, StyleValue, toRef, useSlots } from "vue";
+import { isDataListKVItemValueComponent } from "../../utils";
+import { isEmpty, toKebabCase } from "../../utils";
 const props = defineProps({
+  mode: { type: String, required: false, default: "avatar" },
   items: { type: [Array, Object], required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -136,10 +198,6 @@ const props = defineProps({
   prependIcon: { type: null, required: false },
   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 },
   margin: { type: [Boolean, Number, String], required: false },
   marginTop: { type: [Boolean, Number, String], required: false },
   marginLeft: { type: [Boolean, Number, String], required: false },
@@ -164,7 +222,7 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
@@ -180,10 +238,35 @@ const { roundedClasses, roundedStyles } = useRounded(props);
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { marginClasses, marginStyles } = useMargin(props);
+const isKvMode = computed(() => props.mode === "kv");
 const hasItems = computed(() => {
   return !isEmpty(props.items);
 });
-const { colorStyles } = useBothColor(toRef(props.bgColor), toRef(props.color));
+const avatarItems = computed(() => {
+  if (isKvMode.value || !props.items) return [];
+  return props.items;
+});
+const kvItems = computed(() => {
+  if (!isKvMode.value || !props.items) return [];
+  return Array.isArray(props.items) ? props.items : Object.values(props.items);
+});
+function isComponentValue(v) {
+  if (isVNode(v)) return false;
+  return isDataListKVItemValueComponent(v);
+}
+function isVNodeValue(v) {
+  return isVNode(v);
+}
+function getComponentTag(v) {
+  return v.component;
+}
+function getComponentProps(v) {
+  return v.props;
+}
+function getComponentChildren(v) {
+  return v.children;
+}
+const { colorClasses, colorStyles } = useBothColor(toRef(props.bgColor), toRef(props.color));
 const dataListStyles = computed(() => {
   return [
     borderStyles.value,
@@ -197,6 +280,8 @@ const dataListStyles = computed(() => {
 const dataListClasses = computed(() => {
   return [
     "origam-data-list",
+    `origam-data-list--mode-${props.mode}`,
+    colorClasses.value,
     borderClasses.value,
     paddingClasses.value,
     marginClasses.value,
@@ -207,13 +292,79 @@ const dataListClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(dataListStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
 <style lang="scss" scoped>
 	.origam-data-list {
+		display: var(--origam-data-list---display, block);
+		overflow: var(--origam-data-list---overflow, hidden);
+		background-color: var(--origam-data-list---background-color, transparent);
+		color: var(--origam-data-list---color, inherit);
+		border-radius: var(--origam-data-list---border-radius, 0);
+		padding: var(--origam-data-list---padding, 0);
+		gap: var(--origam-data-list---gap, 0);
+
+		&__title {
+			font-size: var(--origam-data-list__title---font-size, 0.75rem);
+			font-weight: var(--origam-data-list__title---font-weight, 500);
+			color: var(--origam-data-list__title---color, inherit);
+			line-height: var(--origam-data-list__title---line-height, 1.5);
+			letter-spacing: var(--origam-data-list__title---letter-spacing, 0.009375em);
+		}
+
+		&__text {
+			font-size: var(--origam-data-list__text---font-size, 0.875rem);
+			color: var(--origam-data-list__text---color, inherit);
+			line-height: var(--origam-data-list__text---line-height, 1.5);
+			letter-spacing: var(--origam-data-list__text---letter-spacing, 0em);
+		}
+
+		&--mode-kv {
+			display: var(--origam-data-list__kv---display, block);
+		}
+
+		&__kv-row {
+			display: grid;
+			grid-template-columns:
+				var(--origam-data-list__kv---key-width, 160px)
+				1fr;
+			column-gap: var(--origam-data-list__kv---gap-key-value, 1rem);
+			align-items: center;
+			padding-block: var(--origam-data-list__kv---row-padding-block, 0.75rem);
+			border-bottom: 1px solid var(--origam-data-list__kv---row-divider, transparent);
+
+			&:last-child {
+				border-bottom: 0;
+			}
+		}
+
+		&__kv-key {
+			color: var(--origam-data-list__kv---key-color, inherit);
+			font-size: var(--origam-data-list__kv---key-font-size, 0.875rem);
+			font-weight: var(--origam-data-list__kv---key-font-weight, 500);
+			line-height: var(--origam-data-list__kv---key-line-height, 1.5);
+			margin: 0;
+		}
 
+		&__kv-value {
+			color: var(--origam-data-list__kv---value-color, inherit);
+			font-size: var(--origam-data-list__kv---value-font-size, 0.875rem);
+			line-height: var(--origam-data-list__kv---value-line-height, 1.5);
+			margin: 0;
+			min-width: 0;
+			display: flex;
+			align-items: center;
+			gap: var(--origam-data-list__kv---value-inline-gap, 0.5rem);
+			flex-wrap: wrap;
+		}
 	}
 </style>

package/dist/src/components/DataList/OrigamDataText.vue

@@ -60,7 +60,7 @@
 
 <script setup>
 import { OrigamAvatar, OrigamIcon } from "../../components";
-import { useAdjacent, useBothColor, useDensity, useMargin, usePadding, useProps } from "../../composables";
+import { useAdjacent, useBothColor, useDensity, useMargin, usePadding, useProps, useStyle } from "../../composables";
 import { computed, shallowRef, StyleValue, toRef } from "vue";
 const props = defineProps({
   text: { type: [String, Number], required: true },
@@ -87,11 +87,7 @@ const props = defineProps({
   paddingBlock: { type: [Boolean, Number, String], required: false },
   paddingInline: { type: [Boolean, Number, String], required: false },
   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 }
+  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true }
 });
 const { filterProps } = useProps(props);
 const { densityClasses } = useDensity(props);
@@ -105,18 +101,18 @@ const {
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));
 const isHover = shallowRef(false);
 const hoverColor = computed(() => {
-  return props.hoverColor ?? props.color;
+  return props.hoverColor || props.color;
 });
 const color = computed(() => {
   return isHover.value ? hoverColor.value : props.color;
 });
 const hoverBgColor = computed(() => {
-  return props.hoverBgColor ?? props.color;
+  return props.hoverBgColor || props.color;
 });
 const bgColor = computed(() => {
   return isHover.value ? hoverBgColor.value : props.bgColor;
 });
-const { colorStyles } = useBothColor(bgColor, color);
+const { colorClasses, colorStyles } = useBothColor(bgColor, color);
 const dataTextStyles = computed(() => {
   return [
     paddingStyles.value,
@@ -128,13 +124,20 @@ const dataTextStyles = computed(() => {
 const dataTextClasses = computed(() => {
   return [
     "origam-data-text",
+    colorClasses.value,
     paddingClasses.value,
     marginClasses.value,
     densityClasses.value,
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(dataTextStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>

package/dist/src/components/DataList/OrigamDataTitle.vue

@@ -63,7 +63,7 @@
 
 <script setup>
 import { OrigamAvatar, OrigamIcon } from "../../components";
-import { useAdjacent, useBothColor, useDensity, useMargin, usePadding, useProps } from "../../composables";
+import { useAdjacent, useBothColor, useDensity, useMargin, usePadding, useProps, useStyle } from "../../composables";
 import { computed, shallowRef, StyleValue, toRef } from "vue";
 const props = defineProps({
   text: { type: [String, Number], required: true },
@@ -90,11 +90,7 @@ const props = defineProps({
   paddingBlock: { type: [Boolean, Number, String], required: false },
   paddingInline: { type: [Boolean, Number, String], required: false },
   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 }
+  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true }
 });
 const { filterProps } = useProps(props);
 const { densityClasses } = useDensity(props);
@@ -108,18 +104,18 @@ const {
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));
 const isHover = shallowRef(false);
 const hoverColor = computed(() => {
-  return props.hoverColor ?? props.color;
+  return props.hoverColor || props.color;
 });
 const color = computed(() => {
   return isHover.value ? hoverColor.value : props.color;
 });
 const hoverBgColor = computed(() => {
-  return props.hoverBgColor ?? props.color;
+  return props.hoverBgColor || props.color;
 });
 const bgColor = computed(() => {
   return isHover.value ? hoverBgColor.value : props.bgColor;
 });
-const { colorStyles } = useBothColor(bgColor, color);
+const { colorClasses, colorStyles } = useBothColor(bgColor, color);
 const dataTitleStyles = computed(() => {
   return [
     paddingStyles.value,
@@ -131,13 +127,20 @@ const dataTitleStyles = computed(() => {
 const dataTitleClasses = computed(() => {
   return [
     "origam-data-title",
+    colorClasses.value,
     paddingClasses.value,
     marginClasses.value,
     densityClasses.value,
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(dataTitleStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>