origam 0.3.10 → 2.3.0

package/dist/src/components/Img/OrigamImg.vue

@@ -1,10 +1,10 @@
 <template>
 	<origam-responsive
 			v-intersect="intersect"
-			:aria-label="props.alt"
+			:aria-label="alt"
 			:aspect-ratio="aspectRatio"
 			:class="imgClasses"
-			:role="props.alt ? 'img' : undefined"
+			:role="alt ? 'img' : undefined"
 			:style="imgStyles"
 			v-bind="responsiveProps"
 	>
@@ -93,7 +93,15 @@ import {
   watch
 } from "vue";
 import { OrigamResponsive, OrigamTransition } from "../../components";
-import { useBorder, useBothColor, useMargin, usePadding, useProps, useRounded } from "../../composables";
+import {
+  useBorder,
+  useBothColor,
+  useMargin,
+  usePadding,
+  useProps,
+  useRounded,
+  useStyle
+} from "../../composables";
 import { SUPPORTS_INTERSECTION } from "../../consts";
 import { vIntersect } from "../../directives";
 import { IMG_STATE } from "../../enums";
@@ -113,10 +121,6 @@ const props = defineProps({
   position: { type: 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 },
   aspectRatio: { type: [String, Number], required: false },
   contentClass: { type: String, required: false },
   inline: { type: Boolean, required: false },
@@ -152,7 +156,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 },
@@ -163,7 +167,7 @@ const props = defineProps({
 });
 const emits = defineEmits(["loadstart", "load", "error"]);
 const { filterProps } = useProps(props);
-const { colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { roundedClasses, roundedStyles } = useRounded(props);
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
@@ -273,16 +277,19 @@ const pollForSize = (img, timeout = 100) => {
   poll();
 };
 const isBooted = shallowRef(false);
-const stop = watch(aspectRatio, (val) => {
+let stop = null;
+const markBooted = (val) => {
   if (val) {
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
         isBooted.value = true;
       });
     });
-    stop();
+    stop?.();
   }
-});
+};
+stop = watch(aspectRatio, markBooted);
+markBooted(aspectRatio.value);
 const intersect = ref([{
   handler: init,
   options: props.options
@@ -294,7 +301,7 @@ const isLoading = computed(() => {
   return state.value === IMG_STATE.LOADING;
 });
 const isError = computed(() => {
-  return state.value === IMG_STATE.ERROR && !slots.error;
+  return state.value === IMG_STATE.ERROR;
 });
 const hasContent = computed(() => {
   return slots.default;
@@ -314,6 +321,7 @@ const imgClasses = computed(() => {
   return [
     "origam-img",
     { "origam-img--booting": !isBooted.value },
+    colorClasses.value,
     roundedClasses.value,
     borderClasses.value,
     paddingClasses.value,
@@ -341,8 +349,15 @@ const imgGradientStyles = computed(() => {
     `backgroundImage: linear-gradient(${props.gradient})`
   ];
 });
+const { id, css, load, isLoaded: styleIsLoaded, unload } = useStyle(imgStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded,
+  styleIsLoaded
 });
 </script>
 
@@ -359,7 +374,31 @@ defineExpose({
 		}
 
 		&--rounded {
-			border-radius: var(--origam-img--rounded---border-radius);
+			border-radius: var(--origam-radius---2xl, 24px);
+		}
+
+		&--rounded-x-small {
+			border-radius: var(--origam-radius---xs, 2px);
+		}
+
+		&--rounded-small {
+			border-radius: var(--origam-radius---sm, 4px);
+		}
+
+		&--rounded-default {
+			border-radius: var(--origam-radius---md, 8px);
+		}
+
+		&--rounded-medium {
+			border-radius: var(--origam-radius---lg, 12px);
+		}
+
+		&--rounded-large {
+			border-radius: var(--origam-radius---xl, 16px);
+		}
+
+		&--rounded-x-large {
+			border-radius: var(--origam-radius---2xl, 24px);
 		}
 
 		&__picture {

package/dist/src/components/InfiniteScroll/OrigamInfiniteScroll.vue

@@ -116,7 +116,13 @@
 <script setup>
 import { computed, nextTick, onMounted, ref, shallowRef, StyleValue, toRef } from "vue";
 import { OrigamBtn, OrigamInfiniteScrollIntersect, OrigamProgress } from "../../components";
-import { useBothColor, useDimension, useLocale, useProps } from "../../composables";
+import {
+  useBothColor,
+  useDimension,
+  useLocale,
+  useProps,
+  useStyle
+} from "../../composables";
 import {
   DIRECTION,
   INFINITE_SCROLL_MODE,
@@ -135,10 +141,6 @@ const props = defineProps({
   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 },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },
@@ -152,7 +154,7 @@ const emits = defineEmits(["load"]);
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const { dimensionStyles } = useDimension(props);
-const { colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const rootEl = ref();
 const isIntersecting = shallowRef(false);
 const propertyDirection = computed(() => {
@@ -242,7 +244,7 @@ const hasStartIntersect = computed(() => {
   return props.side === INFINITE_SCROLL_SIDE.START || props.side === INFINITE_SCROLL_SIDE.BOTH;
 });
 const hasEndIntersect = computed(() => {
-  return props.side === INFINITE_SCROLL_SIDE.END || INFINITE_SCROLL_SIDE.BOTH;
+  return props.side === INFINITE_SCROLL_SIDE.END || props.side === INFINITE_SCROLL_SIDE.BOTH;
 });
 const isIntersectMode = computed(() => {
   return props.mode === INFINITE_SCROLL_MODE.INTERSECT;
@@ -268,10 +270,35 @@ const infiniteScrollClasses = computed(() => {
       "origam-infinite-scroll--start": hasStartIntersect.value,
       "origam-infinite-scroll--end": hasEndIntersect.value
     },
+    colorClasses.value,
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(infiniteScrollStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
+
+<style lang="scss" scoped>
+	.origam-infinite-scroll {
+		overflow-y: auto;
+
+		&__side {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-direction: column;
+			gap: var(--origam-infinite-scroll__loader---gap, 12px);
+			padding-block: var(--origam-infinite-scroll__loader---padding-block, 12px);
+			padding-inline: var(--origam-infinite-scroll__loader---padding-inline, 0px);
+			font-size: var(--origam-infinite-scroll__loader---font-size, 0.875rem);
+			color: var(--origam-infinite-scroll__empty---color, var(--origam-color__text---secondary));
+		}
+	}
+</style>

package/dist/src/components/Input/OrigamInput.vue

@@ -96,21 +96,19 @@ import { OrigamAvatar, OrigamIcon } from "../../components";
 import { OrigamMessages } from "../../components/Messages";
 import {
   useAdjacent,
-  useBorder,
   useBothColor,
+  useDefaults,
   useDensity,
   useDimension,
-  useElevation,
-  useMargin,
-  usePadding,
   useProps,
-  useRounded,
   useRtl,
+  useSize,
+  useStyle,
   useValidation
 } from "../../composables";
 import { DENSITY, DIRECTION } from "../../enums";
-import { getUid } from "../../utils";
-const props = defineProps({
+import { getUid, wrapInArray } from "../../utils";
+const _props = defineProps({
   centerAffix: { type: Boolean, required: false, default: true },
   hideDetails: { type: [Boolean, String], required: false },
   hideSpinButtons: { type: Boolean, required: false },
@@ -135,17 +133,13 @@ const props = defineProps({
   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 },
+  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 },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -178,19 +172,13 @@ 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 },
+  size: { type: null, required: false }
 });
-defineEmits(["update:modelValue", "click:append", "click:prepend"]);
-const { filterProps } = useProps(props);
-const { densityClasses } = useDensity(props);
-const { dimensionStyles } = useDimension(props);
-const { roundedStyles, roundedClasses } = useRounded(props);
-const { borderClasses, borderStyles } = useBorder(props);
-const { paddingClasses, paddingStyles } = usePadding(props);
-const { marginClasses, marginStyles } = useMargin(props);
-const { elevationClasses } = useElevation(props);
-const { colorStyles } = useBothColor(toRef(props.bgColor), toRef(props.color));
-const { rtlClasses } = useRtl();
+const props = useDefaults(_props);
+defineEmits(["update:modelValue", "click:append", "click:prepend", "update:focused"]);
+defineSlots();
+const slots = useSlots();
 const uid = getUid();
 const id = computed(() => {
   return props.id || `input-${uid}`;
@@ -221,9 +209,9 @@ const messages = computed(() => {
   if (props.errorMessages?.length || !isPristine.value && errorMessages.value.length) {
     return errorMessages.value;
   } else if (props.hint && (props.persistentHint || props.focused)) {
-    return props.hint;
+    return wrapInArray(props.hint);
   }
-  return props.messages ?? [];
+  return wrapInArray(props.messages ?? []);
 });
 const inputProps = computed(() => {
   return {
@@ -240,17 +228,21 @@ const inputProps = computed(() => {
     validate
   };
 });
-const slots = useSlots();
 const hasMessages = computed(() => {
   return messages.value.length > 0;
 });
 const hasDetails = computed(() => {
   return !props.hideDetails || props.hideDetails === "auto" && (hasMessages.value || slots.details);
 });
+const { densityClasses } = useDensity(props);
+const { dimensionStyles } = useDimension(props);
+const { colorClasses, colorStyles } = useBothColor(toRef(props.bgColor), toRef(props.color));
+const { rtlClasses } = useRtl();
+const { sizeClasses } = useSize(props, "origam-input");
 const inputStyles = computed(() => {
   return [
     dimensionStyles.value,
-    marginStyles.value,
+    colorStyles.value,
     props.style
   ];
 });
@@ -262,33 +254,30 @@ const inputClasses = computed(() => {
       "origam-input--center-affix": props.centerAffix,
       "origam-input--hide-spin-buttons": props.hideSpinButtons
     },
+    colorClasses.value,
     densityClasses.value,
-    roundedClasses.value,
-    borderClasses.value,
-    paddingClasses.value,
-    marginClasses.value,
+    sizeClasses.value,
     validationClasses.value,
     rtlClasses.value,
     props.class
   ];
 });
-const inputControlStyles = computed(() => {
-  return [
-    roundedStyles.value,
-    borderStyles.value,
-    paddingStyles.value,
-    colorStyles.value,
-    props.style
-  ];
-});
 const inputControlClasses = computed(() => {
   return [
-    "origam-input__control",
-    elevationClasses.value
+    "origam-input__control"
   ];
 });
+const inputControlStyles = computed(() => []);
+const { filterProps } = useProps(props);
+const { id: styleId, css, load, isLoaded, unload } = useStyle(inputStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded,
+  styleId
 });
 </script>
 
@@ -298,12 +287,11 @@ defineExpose({
 
 		display: grid;
 		flex: 1 1 auto;
-		font-size: 1rem;
-		font-weight: 400;
-		line-height: 1.5;
+		font-size: var(--origam-input---font-size, 1rem);
+		font-weight: var(--origam-input---font-weight, 400);
+		line-height: var(--origam-input---line-height, 1.5);
 
 		--origam-input---padding-top: 16px;
-		--origam-input__control---height: 56px;
 
 		&__details {
 			align-items: flex-end;
@@ -323,7 +311,7 @@ defineExpose({
 		&__prepend,
 		&__append {
 			> .origam-icon {
-				opacity: 0.7;
+				opacity: var(--origam-input---icon-opacity, 0.7);
 			}
 		}
 
@@ -359,16 +347,28 @@ defineExpose({
 			--origam-input---density: -8px;
 		}
 
-		&--border {
-			#{$this}__control {
-				border: 1px solid currentColor;
-			}
+		&--size-small {
+			--origam-input__control---height:        var(--origam-input__control---height-sm, 28px);
+			--origam-field__input---padding-top:     var(--origam-field__input---padding-block-sm, 2px);
+			--origam-field__input---padding-bottom:  var(--origam-field__input---padding-block-sm, 2px);
 		}
 
-		&--rounded {
-			#{$this}__control {
-				border-radius: 4px;
-			}
+		&--size-default {
+			--origam-input__control---height:        var(--origam-input__control---height-md, 36px);
+			--origam-field__input---padding-top:     var(--origam-field__input---padding-block-md, 6px);
+			--origam-field__input---padding-bottom:  var(--origam-field__input---padding-block-md, 6px);
+		}
+
+		&--size-large {
+			--origam-input__control---height:        var(--origam-input__control---height-lg, 44px);
+			--origam-field__input---padding-top:     var(--origam-field__input---padding-block-lg, 10px);
+			--origam-field__input---padding-bottom:  var(--origam-field__input---padding-block-lg, 10px);
+		}
+
+		&--size-x-large {
+			--origam-input__control---height:        var(--origam-input__control---height-xl, 52px);
+			--origam-field__input---padding-top:     var(--origam-field__input---padding-block-xl, 14px);
+			--origam-field__input---padding-bottom:  var(--origam-field__input---padding-block-xl, 14px);
 		}
 
 		&--vertical {
@@ -420,7 +420,7 @@ defineExpose({
 			#{$this}__details,
 			#{$this}__prepend,
 			#{$this}__append {
-				opacity: 0.5;
+				opacity: var(--origam-input---disabled-opacity, 0.5);
 			}
 		}
 
@@ -428,7 +428,7 @@ defineExpose({
 			&:not(#{$this}--disabled) {
 				#{$this}__details {
 					> .origam-messages {
-						color: rgba(255, 0, 0, 1);
+						color: var(--origam-input---error-color, var(--origam-color__feedback--danger---fg-subtle));
 					}
 				}
 
@@ -436,7 +436,7 @@ defineExpose({
 				#{$this}__prepend,
 				#{$this}__append {
 					> .origam-icon {
-						color: rgba(255, 0, 0, 1);
+						color: var(--origam-input---error-color, var(--origam-color__feedback--danger---fg-subtle));
 					}
 				}
 			}
@@ -465,9 +465,3 @@ defineExpose({
 		}
 	}
 </style>
-
-<style>
-	:root {
-		--origam-input---density: 0px;
-	}
-</style>

package/dist/src/components/ItemGroup/OrigamItem.vue

@@ -0,0 +1,66 @@
+<template>
+  <component
+    :is="tag"
+    :class="itemClasses"
+    :style="itemStyles"
+  >
+    <slot
+      name="default"
+      v-bind="slotProps"
+    />
+  </component>
+</template>
+
+<script setup>
+import { computed, StyleValue } from "vue";
+import {
+  useGroupItem,
+  useProps,
+  useStyle
+} from "../../composables";
+import { ORIGAM_ITEM_GROUP_KEY } from "../../consts";
+const props = defineProps({
+  tag: { type: String, required: false, default: "div" },
+  value: { type: null, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false },
+  selectedClass: { type: String, required: false, default: void 0 },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true }
+});
+const { filterProps } = useProps(props);
+const groupItem = useGroupItem(props, ORIGAM_ITEM_GROUP_KEY);
+if (!groupItem) {
+  throw new Error("[Origam] <OrigamItem> must be used inside an <OrigamItemGroup>");
+}
+const slotProps = computed(() => ({
+  isSelected: groupItem.isSelected.value,
+  selectedClass: groupItem.selectedClass.value,
+  toggle: groupItem.toggle,
+  select: groupItem.select,
+  value: groupItem.value.value,
+  disabled: groupItem.disabled.value
+}));
+const itemClasses = computed(() => {
+  return [
+    "origam-item",
+    groupItem?.selectedClass.value,
+    props.class
+  ];
+});
+const itemStyles = computed(() => {
+  return [
+    props.style
+  ];
+});
+const { id, css, load, isLoaded, unload } = useStyle(itemStyles);
+defineExpose({
+  filterProps,
+  toggle: groupItem.toggle,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
+});
+</script>

package/dist/src/components/ItemGroup/OrigamItemGroup.vue

@@ -0,0 +1,75 @@
+<template>
+	<component
+			:is="tag"
+			:class="itemGroupClasses"
+      :style="itemGroupStyles"
+	>
+		<origam-defaults-provider :defaults="slotDefaults">
+			<slot
+					name="default"
+					v-bind="slotProps"
+			/>
+		</origam-defaults-provider>
+	</component>
+</template>
+
+<script setup>
+import { computed, StyleValue } from "vue";
+import { OrigamDefaultsProvider } from "../../components";
+import {
+  useGroup,
+  useProps,
+  useStyle
+} from "../../composables";
+import { ORIGAM_ITEM_GROUP_KEY } from "../../consts";
+const props = defineProps({
+  tag: { type: String, required: false, default: "div" },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  disabled: { type: Boolean, required: false },
+  modelValue: { type: null, required: false },
+  multiple: { type: Boolean, required: false },
+  mandatory: { type: Boolean, required: false },
+  max: { type: Number, required: false },
+  selectedClass: { type: String, required: false, default: "origam-item--selected" }
+});
+defineEmits(["update:modelValue"]);
+const { filterProps } = useProps(props);
+const { isSelected, select, next, prev, selected } = useGroup(props, ORIGAM_ITEM_GROUP_KEY);
+const slotDefaults = computed(() => ({
+  "origam-item": {
+    selectedClass: props.selectedClass
+  }
+}));
+const slotProps = computed(() => ({
+  isSelected,
+  select,
+  next,
+  prev,
+  selected
+}));
+const itemGroupClasses = computed(() => {
+  return [
+    "origam-item-group",
+    props.class
+  ];
+});
+const itemGroupStyles = computed(() => {
+  return [
+    props.style
+  ];
+});
+const { id, css, load, isLoaded, unload } = useStyle(itemGroupStyles);
+defineExpose({
+  filterProps,
+  next,
+  prev,
+  select,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
+});
+</script>

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OrigamItem", {
+  enumerable: true,
+  get: function () {
+    return _OrigamItem.default;
+  }
+});
+Object.defineProperty(exports, "OrigamItemGroup", {
+  enumerable: true,
+  get: function () {
+    return _OrigamItemGroup.default;
+  }
+});
+var _OrigamItem = _interopRequireDefault(require("./OrigamItem.vue"));
+var _OrigamItemGroup = _interopRequireDefault(require("./OrigamItemGroup.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

@@ -0,0 +1,2 @@
+export { default as OrigamItem } from './OrigamItem.vue';
+export { default as OrigamItemGroup } from './OrigamItemGroup.vue';

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

@@ -0,0 +1,2 @@
+export { default as OrigamItem } from "./OrigamItem.vue";
+export { default as OrigamItemGroup } from "./OrigamItemGroup.vue";