origam 2.14.1 → 2.16.0

package/dist/src/components/ExpansionPanel/OrigamExpansionPanel.vue

@@ -1,6 +1,6 @@
 <template>
 	<component
-			:is="props.tag"
+			:is="tag"
 			v-contrast
 			:class="expansionPanelClasses"
 			:style="expansionPanelStyles"
@@ -118,7 +118,7 @@ import {
 } from "../../composables";
 import { vContrast } from "../../directives";
 import { ORIGAM_EXPANSION_PANEL_KEY } from "../../consts";
-import { PROGRESS_TYPE } from "../../enums";
+import { LOADER_KIND, PROGRESS_TYPE } from "../../enums";
 const _props = defineProps({
   tag: { type: String, required: false, default: "div" },
   id: { type: String, required: false },
@@ -178,11 +178,11 @@ const _props = defineProps({
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, 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 },
+  fontFamily: { type: null, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false },
   content: { type: null, required: false },
   eager: { type: Boolean, required: false },
   loading: { type: [Boolean, Number, Object], required: false },
@@ -190,6 +190,7 @@ const _props = defineProps({
 });
 const props = useDefaults(_props);
 defineEmits(["group:selected"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const origamExpansionPanelHeaderRef = ref();
 const origamExpansionPanelContentRef = ref();
@@ -225,7 +226,7 @@ const isAfterSelected = computed(() => {
 if (groupItem !== null) {
   provide(ORIGAM_EXPANSION_PANEL_KEY, groupItem);
 }
-const { loaderClasses, loaderConfig } = useLoader(props, "line");
+const { loaderClasses, loaderConfig } = useLoader(props, LOADER_KIND.LINE);
 const hasLoading = computed(() => {
   return slots.loader || loaderConfig.value.isActive;
 });

package/dist/src/components/ExpansionPanel/OrigamExpansionPanelContent.vue

@@ -67,7 +67,7 @@ import {
   useRounded,
   useStyle
 } from "../../composables";
-import { PROGRESS_TYPE } from "../../enums";
+import { LOADER_KIND, PROGRESS_TYPE } from "../../enums";
 import { ORIGAM_EXPANSION_PANEL_KEY } from "../../consts";
 const props = defineProps({
   content: { type: null, required: false },
@@ -114,6 +114,7 @@ const props = defineProps({
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false }
 });
+defineSlots();
 const { filterProps } = useProps(props);
 const expansionPanel = inject(ORIGAM_EXPANSION_PANEL_KEY);
 if (!expansionPanel) throw new Error("[Origam] expansion-panel-content needs to be placed inside expansion-panel");
@@ -124,7 +125,7 @@ const isSelected = computed(() => {
 const isComponent = computed(() => {
   return typeof props.content !== "string";
 });
-const { loaderClasses, loaderConfig } = useLoader(props, "line");
+const { loaderClasses, loaderConfig } = useLoader(props, LOADER_KIND.LINE);
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { marginClasses, marginStyles } = useMargin(props);

package/dist/src/components/ExpansionPanel/OrigamExpansionPanelHeader.vue

@@ -162,13 +162,14 @@ const props = defineProps({
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, 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 }
+  fontFamily: { type: null, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false }
 });
 defineEmits(["click:append", "click:prepend"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const expansionPanel = inject(ORIGAM_EXPANSION_PANEL_KEY);
 if (!expansionPanel) throw new Error("[Origam] expansion-panel-content needs to be placed inside expansion-panel");

package/dist/src/components/ExpansionPanel/OrigamExpansionPanels.vue

@@ -122,11 +122,14 @@ import {
   useGroup,
   useHover,
   useLoader,
+  usePassedProps,
   useProps,
   useStateEffect,
   useStyle
 } from "../../composables";
 import { ORIGAM_EXPANSION_PANEL_KEY } from "../../consts";
+import { omitUndefined } from "../../utils";
+import { LOADER_KIND } from "../../enums";
 const props = defineProps({
   flat: { type: Boolean, required: false },
   items: { type: Array, required: false },
@@ -190,15 +193,17 @@ const props = defineProps({
   hover: { type: [Boolean, Object], required: false }
 });
 defineEmits(["update:modelValue"]);
+defineSlots();
 const { filterProps } = useProps(props);
+const wasPropPassed = usePassedProps(props);
 const slotDefaults = computed(() => ({
-  "origam-expansion-panel": {
-    density: props.density,
-    color: props.color,
-    bgColor: props.bgColor,
-    rounded: props.rounded,
-    border: props.border
-  }
+  "origam-expansion-panel": omitUndefined({
+    density: wasPropPassed("density") ? props.density : void 0,
+    color: wasPropPassed("color") ? props.color : void 0,
+    bgColor: wasPropPassed("bgColor") ? props.bgColor : void 0,
+    rounded: wasPropPassed("rounded") ? props.rounded : void 0,
+    border: wasPropPassed("border") ? props.border : void 0
+  })
 }));
 useGroup(props, ORIGAM_EXPANSION_PANEL_KEY);
 const slots = useSlots();
@@ -217,7 +222,7 @@ const {
 } = useStateEffect(props, isHover, isActive, hoverState, activeState);
 const { elevationClasses } = useElevation(props, toRef(props, "flat"));
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
-const { loaderClasses } = useLoader(props, "line");
+const { loaderClasses } = useLoader(props, LOADER_KIND.LINE);
 const expansionPanelsStyles = computed(() => {
   return [
     colorStyles.value,

package/dist/src/components/Field/OrigamField.vue

@@ -186,7 +186,7 @@ import {
   useVariant
 } from "../../composables";
 import { vContrast } from "../../directives";
-import { DENSITY, EASING, KEYBOARD_VALUES, MDI_ICONS, PROGRESS_TYPE, VARIANT_INPUT } from "../../enums";
+import { DENSITY, EASING, KEYBOARD_VALUES, LOADER_KIND, MDI_ICONS, PROGRESS_TYPE, VARIANT_INPUT } from "../../enums";
 import { animate, convertToUnit, getUid, nullifyTransforms } from "../../utils";
 const _props = defineProps({
   centerAffix: { type: Boolean, required: false, default: true },
@@ -255,11 +255,11 @@ const _props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { 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 },
+  fontFamily: { type: null, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   variant: { type: null, required: false, default: VARIANT_INPUT.OUTLINED },
@@ -366,7 +366,7 @@ const floatingLabelProps = computed(() => {
     rounded: false
   };
 });
-const { loaderClasses, loaderConfig } = useLoader(props, "line");
+const { loaderClasses, loaderConfig } = useLoader(props, LOADER_KIND.LINE);
 const hasLoader = computed(() => {
   return slots.loader || loaderConfig.value.isActive;
 });

package/dist/src/components/FileField/OrigamFileField.vue

@@ -287,7 +287,7 @@
           </origam-field>
 
           <ul
-              v-if="multiple && hasFiles && !hasChips && displayMode === 'list'"
+              v-if="multiple && hasFiles && !hasChips && displayMode === FILE_FIELD_DISPLAY.LIST"
               class="origam-file-field__list"
           >
             <template v-for="(item, idx) in fileList" :key="idx">
@@ -390,7 +390,7 @@ import {
   useStyle,
   useVModel
 } from "../../composables";
-import { DENSITY, MDI_ICONS } from "../../enums";
+import { DENSITY, FILE_FIELD_DISPLAY, MDI_ICONS } from "../../enums";
 import { filterInputAttrs, forwardRefs, humanReadableFileSize, wrapInArray } from "../../utils";
 const _props = defineProps({
   chips: { type: Boolean, required: false },
@@ -418,7 +418,7 @@ const _props = defineProps({
   dropzoneSubtitle: { type: String, required: false, default: "origam.file_field.dropzone_subtitle" },
   browseText: { type: String, required: false, default: "origam.file_field.browse" },
   maxFileSizeErrorString: { type: String, required: false, default: "origam.validation.max_size_error" },
-  display: { type: String, required: false, default: "list" },
+  display: { type: null, required: false, default: "list" },
   dropzone: { type: Boolean, required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -486,11 +486,11 @@ const _props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { 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 },
+  fontFamily: { type: null, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   variant: { type: null, required: false },
@@ -522,8 +522,8 @@ const _props = defineProps({
 const props = useDefaults(_props);
 const isDropzoneMode = computed(() => Boolean(props.dropzone || props.dragndrop));
 const displayMode = computed(() => {
-  if (props.chips) return "chips";
-  return props.display ?? "list";
+  if (props.chips) return FILE_FIELD_DISPLAY.CHIPS;
+  return props.display ?? FILE_FIELD_DISPLAY.LIST;
 });
 const isErrored = computed(() => Boolean(props.error));
 const errorMessage = computed(() => typeof props.error === "string" ? props.error : "");
@@ -713,10 +713,10 @@ const hasDetails = computed(() => {
   return slots.details || hasCounter.value;
 });
 const hasChips = computed(() => {
-  return displayMode.value === "chips" || slots.chip;
+  return displayMode.value === FILE_FIELD_DISPLAY.CHIPS || slots.chip;
 });
 const hasInlineCounter = computed(() => {
-  return displayMode.value === "counter" && hasFiles.value && props.multiple;
+  return displayMode.value === FILE_FIELD_DISPLAY.COUNTER && hasFiles.value && props.multiple;
 });
 const inlineCounterValue = computed(() => {
   return model.value?.length ?? 0;

package/dist/src/components/FileField/OrigamFileFieldDragNDropItem.vue

@@ -64,11 +64,11 @@ const _props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  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 }
+  fontFamily: { type: null, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false }
 });
 const props = useDefaults(_props);
 const emits = defineEmits(["click:remove"]);

package/dist/src/components/FileField/OrigamFileFieldListItem.vue

@@ -64,11 +64,11 @@ const _props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  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 }
+  fontFamily: { type: null, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false }
 });
 const props = useDefaults(_props);
 const emits = defineEmits(["click:remove"]);

package/dist/src/components/Form/OrigamForm.vue

@@ -80,14 +80,14 @@ 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 },
-  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 }
+  fontFamily: { type: null, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false }
 });
 const props = useDefaults(_props);
-const emits = defineEmits(["submit", "reset"]);
+const emits = defineEmits(["submit", "reset", "update:modelValue"]);
 defineSlots();
 const slots = useSlots();
 const { filterProps } = useProps(props);

package/dist/src/components/Grid/OrigamGrid.vue

@@ -24,17 +24,17 @@ import { GRID_GAP_SIZE_VAR } from "../../consts";
 const props = defineProps({
   columns: { type: [Number, String, Array], required: false, default: "auto" },
   rows: { type: [Number, String, Array], required: false, default: "auto" },
-  gap: { type: [String, Number], required: false, default: "md" },
-  columnGap: { type: [String, Number], required: false, default: void 0 },
-  rowGap: { type: [String, Number], required: false, default: void 0 },
+  gap: { type: null, required: false, default: "md" },
+  columnGap: { type: null, required: false, default: void 0 },
+  rowGap: { type: null, required: false, default: void 0 },
   areas: { type: [String, Array], required: false, default: void 0 },
-  autoFlow: { type: String, required: false, default: "row" },
+  autoFlow: { type: null, required: false, default: "row" },
   autoColumns: { type: String, required: false, default: void 0 },
   autoRows: { type: String, required: false, default: void 0 },
-  alignItems: { type: String, required: false, default: "stretch" },
-  justifyItems: { type: String, required: false, default: "stretch" },
-  alignContent: { type: String, required: false, default: void 0 },
-  justifyContent: { type: String, required: false, default: void 0 },
+  alignItems: { type: null, required: false, default: "stretch" },
+  justifyItems: { type: null, required: false, default: "stretch" },
+  alignContent: { type: null, required: false, default: void 0 },
+  justifyContent: { type: null, required: false, default: void 0 },
   inline: { type: Boolean, required: false, default: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -83,6 +83,7 @@ const props = defineProps({
   borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const serialiseTracks = (value) => {
   if (value == null) return void 0;
   if (typeof value === "number") {

package/dist/src/components/Grid/OrigamGridItem.vue

@@ -14,13 +14,14 @@ const props = defineProps({
   column: { type: [Object, String, Number], required: false, default: void 0 },
   row: { type: [Object, String, Number], required: false, default: void 0 },
   area: { type: String, required: false, default: void 0 },
-  alignSelf: { type: String, required: false, default: void 0 },
-  justifySelf: { type: String, required: false, default: void 0 },
+  alignSelf: { type: null, required: false, default: void 0 },
+  justifySelf: { type: null, 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 },
   tag: { type: String, required: false, default: "div" }
 });
+defineSlots();
 const serialiseLineSpec = (value) => {
   if (value == null) return void 0;
   if (typeof value === "number") return String(value);

package/dist/src/components/Grids/OrigamCol.vue

@@ -79,6 +79,7 @@ const props = defineProps({
   alignXxl: { type: null, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);

package/dist/src/components/Grids/OrigamContainer.vue

@@ -60,6 +60,7 @@ const props = defineProps({
   borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { marginClasses, marginStyles } = useMargin(props);

package/dist/src/components/Grids/OrigamRow.vue

@@ -72,6 +72,7 @@ const props = defineProps({
   justifyXxl: { type: null, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { colorClasses, colorStyles } = useBothColor(
   toRef(props, "bgColor"),
   toRef(props, "color")

package/dist/src/components/Grids/OrigamSpacer.vue

@@ -18,6 +18,7 @@ const props = defineProps({
   tag: { type: String, required: false, default: "div" }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const spacerStyles = computed(() => {
   return [
     props.style

package/dist/src/components/Icon/OrigamClassIcon.vue

@@ -7,12 +7,20 @@
 </template>
 
 <script lang="ts" setup>
-import { useProps, useStyle } from "../../composables";
+import {
+  useBorder,
+  useBothColor,
+  useDimension,
+  useMargin,
+  usePadding,
+  useProps,
+  useRounded,
+  useStyle
+} from "../../composables";
 import { SIZES_ARRAY } from "../../consts";
 import { convertToUnit } from "../../utils";
-import { computed, StyleValue } from "vue";
+import { computed, StyleValue, toRef } from "vue";
 const props = defineProps({
-  disabled: { type: Boolean, required: false },
   icon: { type: null, required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
@@ -61,6 +69,12 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false }
 });
 const { filterProps } = useProps(props);
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { borderClasses, borderStyles } = useBorder(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { dimensionStyles } = useDimension(props);
 const iconStyles = computed(() => {
   const numericSize = typeof props.size === "number" ? convertToUnit(props.size) : void 0;
   return [
@@ -68,6 +82,12 @@ const iconStyles = computed(() => {
       "font-size": numericSize,
       "line-height": numericSize
     },
+    colorStyles.value,
+    borderStyles.value,
+    roundedStyles.value,
+    dimensionStyles.value,
+    marginStyles.value,
+    paddingStyles.value,
     props.style
   ];
 });
@@ -77,6 +97,11 @@ const iconClasses = computed(() => {
     "origam-icon",
     namedSize,
     props.icon,
+    colorClasses.value,
+    borderClasses.value,
+    roundedClasses.value,
+    paddingClasses.value,
+    marginClasses.value,
     props.class
   ];
 });

package/dist/src/components/Icon/OrigamComponentIcon.vue

@@ -14,12 +14,20 @@
 </template>
 
 <script lang="ts" setup>
-import { useProps, useStyle } from "../../composables";
+import {
+  useBorder,
+  useBothColor,
+  useDimension,
+  useMargin,
+  usePadding,
+  useProps,
+  useRounded,
+  useStyle
+} from "../../composables";
 import { SIZES_ARRAY } from "../../consts";
-import { computed, StyleValue } from "vue";
+import { computed, StyleValue, toRef } from "vue";
 import { convertToUnit } from "../../utils";
 const props = defineProps({
-  disabled: { type: Boolean, required: false },
   icon: { type: null, required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
@@ -68,12 +76,19 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const hasIcon = computed(() => {
   return !!props.icon;
 });
 const iconComponent = computed(() => {
   return props.icon;
 });
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { borderClasses, borderStyles } = useBorder(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { dimensionStyles } = useDimension(props);
 const iconStyles = computed(() => {
   const numericSize = typeof props.size === "number" ? convertToUnit(props.size) : void 0;
   return [
@@ -82,6 +97,12 @@ const iconStyles = computed(() => {
       "width": numericSize,
       "height": numericSize
     },
+    colorStyles.value,
+    borderStyles.value,
+    roundedStyles.value,
+    dimensionStyles.value,
+    marginStyles.value,
+    paddingStyles.value,
     props.style
   ];
 });
@@ -91,6 +112,11 @@ const iconClasses = computed(() => {
     "origam-icon",
     "origam-icon--component",
     namedSize,
+    colorClasses.value,
+    borderClasses.value,
+    roundedClasses.value,
+    paddingClasses.value,
+    marginClasses.value,
     props.class
   ];
 });

package/dist/src/components/Icon/OrigamIcon.vue

@@ -30,7 +30,6 @@ import {
 import { flattenFragments } from "../../utils";
 const attrs = useAttrs();
 const props = defineProps({
-  disabled: { type: Boolean, required: false },
   icon: { type: null, required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
@@ -79,6 +78,7 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);

package/dist/src/components/Icon/OrigamLigatureIcon.vue

@@ -9,12 +9,20 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, StyleValue } from "vue";
-import { useProps, useStyle } from "../../composables";
+import { computed, StyleValue, toRef } from "vue";
+import {
+  useBorder,
+  useBothColor,
+  useDimension,
+  useMargin,
+  usePadding,
+  useProps,
+  useRounded,
+  useStyle
+} from "../../composables";
 import { SIZES_ARRAY } from "../../consts";
 import { convertToUnit } from "../../utils";
 const props = defineProps({
-  disabled: { type: Boolean, required: false },
   icon: { type: null, required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
@@ -63,6 +71,12 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false }
 });
 const { filterProps } = useProps(props);
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { borderClasses, borderStyles } = useBorder(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { dimensionStyles } = useDimension(props);
 const iconStyles = computed(() => {
   const numericSize = typeof props.size === "number" ? convertToUnit(props.size) : void 0;
   return [
@@ -70,6 +84,12 @@ const iconStyles = computed(() => {
       "font-size": numericSize,
       "line-height": numericSize
     },
+    colorStyles.value,
+    borderStyles.value,
+    roundedStyles.value,
+    dimensionStyles.value,
+    marginStyles.value,
+    paddingStyles.value,
     props.style
   ];
 });
@@ -79,6 +99,11 @@ const iconClasses = computed(() => {
     "origam-icon",
     "origam-icon--ligature",
     namedSize,
+    colorClasses.value,
+    borderClasses.value,
+    roundedClasses.value,
+    paddingClasses.value,
+    marginClasses.value,
     props.class
   ];
 });