origam 0.3.9 → 2.2.1

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

@@ -9,8 +9,15 @@
 </template>
 
 <script setup>
-import { useBorder, useBothColor, useMargin, usePadding, useProps, useRounded, useRtl } from "../../composables";
-import { computed, StyleValue, toRef } from "vue";
+import {
+  useBorder,
+  useMargin,
+  usePadding,
+  useProps,
+  useRtl,
+  useStyle
+} from "../../composables";
+import { computed, StyleValue } from "vue";
 const props = defineProps({
   fluid: { type: Boolean, required: false, default: false },
   fullscreen: { type: Boolean, required: false },
@@ -46,33 +53,18 @@ const props = defineProps({
   borderBlock: { type: [Boolean, Number, String], required: false },
   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 },
-  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 }
+  borderStyle: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
-const { colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
-const { roundedClasses, roundedStyles } = useRounded(props);
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { marginClasses, marginStyles } = useMargin(props);
 const { rtlClasses } = useRtl();
 const containerStyles = computed(() => {
   return [
-    roundedStyles.value,
     borderStyles.value,
     paddingStyles.value,
     marginStyles.value,
-    colorStyles.value,
     props.style
   ];
 });
@@ -87,12 +79,17 @@ const containerClasses = computed(() => {
     borderClasses.value,
     paddingClasses.value,
     marginClasses.value,
-    roundedClasses.value,
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(containerStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
@@ -124,10 +121,6 @@ defineExpose({
 			box-shadow: var(--origam-container--border---box-shadow);
 		}
 
-		&--rounded {
-			border-radius: var(--origam-container--rounded---border-radius);
-		}
-
 		@media (min-width: 960px) {
 			--origam-container---max-width: 900px;
 		}

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

@@ -10,7 +10,15 @@
 
 <script setup>
 import { computed, StyleValue, toRef } from "vue";
-import { useBorder, useBothColor, useDensity, useMargin, usePadding, useProps } from "../../composables";
+import {
+  useBorder,
+  useBothColor,
+  useDensity,
+  useMargin,
+  usePadding,
+  useProps,
+  useStyle
+} from "../../composables";
 import { DENSITY } from "../../enums";
 import { toKebabCase } from "../../utils";
 const props = defineProps({
@@ -44,11 +52,6 @@ const props = defineProps({
   borderColor: { type: String, required: false },
   borderStyle: { 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 },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   align: { type: null, required: false },
   alignSm: { type: null, required: false },
@@ -64,7 +67,7 @@ const props = defineProps({
   justifyXxl: { type: null, required: false }
 });
 const { filterProps } = useProps(props);
-const { colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { densityClasses } = useDensity(props);
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
@@ -81,29 +84,34 @@ const rowStyles = computed(() => {
 const rowClasses = computed(() => {
   const classes = [
     "origam-row",
-    {
-      [`origam-row--align-${props.align}`]: props.align,
-      [`origam-row--justify-${props.justify}`]: props.justify
-    },
+    colorClasses.value,
     densityClasses.value,
     borderClasses.value,
     paddingClasses.value,
     marginClasses.value,
     props.class
   ];
-  const propMap = {
-    align: ["alignSm", "alignMd", "alignLg", "alignXl", "alignXxl"],
-    justify: ["justifySm", "justifyMd", "justifyLg", "justifyXl", "justifyXxl"]
+  const propFamilies = {
+    align: ["align", "alignSm", "alignMd", "alignLg", "alignXl", "alignXxl"],
+    justify: ["justify", "justifySm", "justifyMd", "justifyLg", "justifyXl", "justifyXxl"],
+    direction: ["direction"]
   };
-  for (const type in propMap) {
-    propMap[type].forEach((prop) => {
-      if (props[prop]) classes.push(`origam-row--${toKebabCase(prop)} : ${props[prop]}`);
+  for (const family in propFamilies) {
+    propFamilies[family].forEach((prop) => {
+      const value = props[prop];
+      if (value) classes.push(`origam-row--${toKebabCase(prop)}-${value}`);
     });
   }
   return classes;
 });
+const { id, css, load, isLoaded, unload } = useStyle(rowStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
@@ -114,6 +122,7 @@ defineExpose({
 
 	.origam-row {
 		display: var(--origam-row---display);
+		flex-direction: var(--origam-row---flex-direction);
 		flex-wrap: var(--origam-row---flex-wrap);
 		flex: var(--origam-row---flex);
 		align-items: var(--origam-row---align-items);
@@ -135,21 +144,15 @@ defineExpose({
 		}
 
 		&--density-default {
-			--origam-row---density: -8px;
-
-			> .origam-col,
-			> [class*=origam-col-] {
-				// padding 4px
-			}
+			--origam-row---density: 0;
 		}
 
 		&--density-compact {
-			--origam-row---density: 0;
+			--origam-row---density: -8px;
+		}
 
-			> .origam-col,
-			> [class*=origam-col-] {
-				// padding 4px
-			}
+		&--density-comfortable {
+			--origam-row---density: 8px;
 		}
 
 		&--border {
@@ -169,6 +172,12 @@ defineExpose({
 			}
 		}
 
+		@each $direction in (row, row-reverse, column, column-reverse) {
+			&--direction-#{$direction} {
+				--origam-row---flex-direction: #{$direction};
+			}
+		}
+
 		@each $breakpoint, $breakpointSize in $breakpoints {
 			@each $align, $alignAttr in $aligns {
 				&--align-#{$breakpoint}-#{$align} {
@@ -192,6 +201,7 @@ defineExpose({
 <style>
 	:root {
 		--origam-row---display: flex;
+		--origam-row---flex-direction: row;
 		--origam-row---flex-wrap: wrap;
 		--origam-row---flex: 1 1 auto;
 
@@ -207,6 +217,8 @@ defineExpose({
 		--origam-row---margin-inline-start: -4px;
 		--origam-row---margin-inline-end: -4px;
 
+		--origam-row---density: 0;
+
 		--origam-row---align-items: stretch;
 		--origam-row---justify-content: flex-start
 	}

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

@@ -10,7 +10,7 @@
 
 <script setup>
 import { computed, StyleValue } from "vue";
-import { useProps } from "../../composables";
+import { useProps, useStyle } from "../../composables";
 const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -29,8 +29,14 @@ const spacerClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(spacerStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 

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

@@ -7,18 +7,14 @@
 </template>
 
 <script setup>
-import { useProps } from "../../composables";
+import { useProps, useStyle } from "../../composables";
+import { SIZES_ARRAY } from "../../consts";
 import { convertToUnit } from "../../utils";
 import { computed, StyleValue } from "vue";
 const props = defineProps({
   disabled: { type: Boolean, required: false },
   icon: { 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 },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -50,21 +46,31 @@ const props = defineProps({
 });
 const { filterProps } = useProps(props);
 const iconStyles = computed(() => {
+  const numericSize = typeof props.size === "number" ? convertToUnit(props.size) : void 0;
   return [
     {
-      "font-size": props.size && typeof props.size === "number" ? convertToUnit(props.size) : void 0,
-      "line-height": props.size && typeof props.size === "number" ? convertToUnit(props.size) : void 0
+      "font-size": numericSize,
+      "line-height": numericSize
     },
     props.style
   ];
 });
 const iconClasses = computed(() => {
+  const namedSize = typeof props.size === "string" && SIZES_ARRAY.includes(props.size) ? `origam-icon--size-${props.size}` : void 0;
   return [
+    "origam-icon",
+    namedSize,
     props.icon,
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(iconStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>

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

@@ -14,17 +14,14 @@
 </template>
 
 <script setup>
-import { useProps } from "../../composables";
+import { useProps, useStyle } from "../../composables";
+import { SIZES_ARRAY } from "../../consts";
 import { computed, StyleValue } from "vue";
+import { convertToUnit } from "../../utils";
 const props = defineProps({
   disabled: { type: Boolean, required: false },
   icon: { 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 },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -62,16 +59,32 @@ const iconComponent = computed(() => {
   return props.icon;
 });
 const iconStyles = computed(() => {
+  const numericSize = typeof props.size === "number" ? convertToUnit(props.size) : void 0;
   return [
+    {
+      "font-size": numericSize,
+      "width": numericSize,
+      "height": numericSize
+    },
     props.style
   ];
 });
 const iconClasses = computed(() => {
+  const namedSize = typeof props.size === "string" && SIZES_ARRAY.includes(props.size) ? `origam-icon--size-${props.size}` : void 0;
   return [
+    "origam-icon",
+    "origam-icon--component",
+    namedSize,
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(iconStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>

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

@@ -15,18 +15,22 @@
 
 <script setup>
 import { computed, ref, StyleValue, toRef, useAttrs, useSlots } from "vue";
-import { useBorder, useBothColor, useIcon, useMargin, usePadding, useProps, useSize } from "../../composables";
+import {
+  useBorder,
+  useBothColor,
+  useIcon,
+  useMargin,
+  usePadding,
+  useProps,
+  useSize,
+  useStyle
+} from "../../composables";
 import { flattenFragments } from "../../utils";
 const attrs = useAttrs();
 const props = defineProps({
   disabled: { type: Boolean, required: false },
   icon: { 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 },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -57,7 +61,7 @@ const props = defineProps({
   borderStyle: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
-const { colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+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);
@@ -86,6 +90,7 @@ const iconClasses = computed(() => {
     {
       "origam-icon--clickable": !!attrs.onClick
     },
+    colorClasses.value,
     sizeClasses.value,
     borderClasses.value,
     paddingClasses.value,
@@ -93,37 +98,49 @@ const iconClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(iconStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 	.origam-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--origam-icon---color, currentColor);
+		transition-duration: var(--origam-icon---transition-duration, 150ms);
+		transition-timing-function: var(--origam-icon---transition-timing-function, ease);
+		transition-property: color, background-color, transform;
+
+		&--clickable {
+			cursor: pointer;
+		}
+
 		&--size-x-small {
-			font-size: 1em;
+			font-size: var(--origam-icon---font-size-xs, 1em);
 		}
 
 		&--size-small {
-			font-size: 1.25em;
+			font-size: var(--origam-icon---font-size-sm, 1.25em);
 		}
 
 		&--size-default {
-			font-size: 1.5em;
+			font-size: var(--origam-icon---font-size-md, 1.5em);
 		}
 
 		&--size-large {
-			font-size: 1.75em;
+			font-size: var(--origam-icon---font-size-lg, 1.75em);
 		}
 
 		&--size-x-large {
-			font-size: 2em;
+			font-size: var(--origam-icon---font-size-xl, 2em);
 		}
 	}
 </style>
-
-<style>
-	:root {
-
-	}
-</style>

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

@@ -10,16 +10,13 @@
 
 <script setup>
 import { computed, StyleValue } from "vue";
-import { useProps } from "../../composables";
+import { useProps, 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, 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 },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -51,16 +48,46 @@ const props = defineProps({
 });
 const { filterProps } = useProps(props);
 const iconStyles = computed(() => {
+  const numericSize = typeof props.size === "number" ? convertToUnit(props.size) : void 0;
   return [
+    {
+      "font-size": numericSize,
+      "line-height": numericSize
+    },
     props.style
   ];
 });
 const iconClasses = computed(() => {
+  const namedSize = typeof props.size === "string" && SIZES_ARRAY.includes(props.size) ? `origam-icon--size-${props.size}` : void 0;
   return [
+    "origam-icon",
+    "origam-icon--ligature",
+    namedSize,
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(iconStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
+
+<style lang="scss" scoped>
+	.origam-icon--ligature {
+		font-family: 'Material Icons', 'Material Symbols Outlined', sans-serif;
+		font-weight: normal;
+		font-style: normal;
+		text-transform: none;
+		letter-spacing: normal;
+		word-wrap: normal;
+		white-space: nowrap;
+		direction: ltr;
+		-webkit-font-feature-settings: 'liga';
+		-webkit-font-smoothing: antialiased;
+	}
+</style>

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

@@ -19,7 +19,7 @@
 						v-for="(path, index) in icon"
 						:key="index"
 				>
-					<template v-if="!isArray(path)">
+					<template v-if="isArray(path)">
 						<path
 								:d="path[0]"
 								:fill-opacity="path[1]"
@@ -36,16 +36,13 @@
 
 <script setup>
 import { computed, StyleValue } from "vue";
-import { useProps } from "../../composables";
+import { useProps, 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, 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 },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -80,16 +77,46 @@ const isArray = (data) => {
   return Array.isArray(data);
 };
 const iconStyles = computed(() => {
+  const numericSize = typeof props.size === "number" ? convertToUnit(props.size) : void 0;
   return [
+    {
+      "font-size": numericSize,
+      "width": numericSize,
+      "height": numericSize
+    },
     props.style
   ];
 });
 const iconClasses = computed(() => {
+  const namedSize = typeof props.size === "string" && SIZES_ARRAY.includes(props.size) ? `origam-icon--size-${props.size}` : void 0;
   return [
+    "origam-icon",
+    "origam-icon--svg",
+    namedSize,
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(iconStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
+
+<style lang="scss" scoped>
+	.origam-icon--svg {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+
+		.origam-icon__svg {
+			width: 1em;
+			height: 1em;
+			fill: currentColor;
+		}
+	}
+</style>