origam 0.3.9 → 2.2.1

package/dist/src/components/List/OrigamList.vue

@@ -11,79 +11,81 @@
 			@keydown="handleKeydown"
 			@mousedown="handleMouseDown"
 	>
-		<slot name="default">
-			<origam-list-children
-					v-if="items"
-					:items="items"
-					:return-object="returnObject"
-			>
-				<template
-						v-if="hasChildrenItem"
-						#children="{item, index}"
+		<origam-defaults-provider :defaults="slotDefaults">
+			<slot name="default">
+				<origam-list-children
+						v-if="items"
+						:items="items"
+						:return-object="returnObject"
 				>
-					<slot
-							name="childrenItem"
-							v-bind="{item, index}"
-					/>
-				</template>
+					<template
+							v-if="hasChildrenItem"
+							#children="{item, index}"
+					>
+						<slot
+								name="childrenItem"
+								v-bind="{item, index}"
+						/>
+					</template>
 
-				<template
-						v-if="hasDivider"
-						#divider="{itemProps}"
-				>
-					<slot
-							name="divider"
-							v-bind="itemProps"
-					/>
-				</template>
+					<template
+							v-if="hasDivider"
+							#divider="{itemProps}"
+					>
+						<slot
+								name="divider"
+								v-bind="itemProps"
+						/>
+					</template>
 
-				<template
-						v-if="hasSubheader"
-						#subheader="{itemProps}"
-				>
-					<slot
-							name="subheader"
-							v-bind="itemProps"
-					/>
-				</template>
+					<template
+							v-if="hasSubheader"
+							#subheader="{itemProps}"
+					>
+						<slot
+								name="subheader"
+								v-bind="itemProps"
+						/>
+					</template>
 
-				<template
-						v-if="hasGroup"
-						#group="{itemProps}"
-				>
-					<slot
-							name="group"
-							v-bind="itemProps"
-					/>
-				</template>
+					<template
+							v-if="hasGroup"
+							#group="{itemProps}"
+					>
+						<slot
+								name="group"
+								v-bind="itemProps"
+						/>
+					</template>
 
-				<template
-						v-if="hasGroupActivator"
-						#groupActivator="{props, isOpen, events, toggleIcon}"
-				>
-					<slot
-							name="groupActivator"
-							v-bind="{props, isOpen, events, toggleIcon}"
-					/>
-				</template>
+					<template
+							v-if="hasGroupActivator"
+							#groupActivator="{props, isOpen, events, toggleIcon}"
+					>
+						<slot
+								name="groupActivator"
+								v-bind="{props, isOpen, events, toggleIcon}"
+						/>
+					</template>
 
-				<template
-						v-if="hasItem"
-						#item="{itemProps}"
-				>
-					<slot
-							name="item"
-							v-bind="itemProps"
-					/>
-				</template>
-			</origam-list-children>
-		</slot>
+					<template
+							v-if="hasItem"
+							#item="{itemProps}"
+					>
+						<slot
+								name="item"
+								v-bind="itemProps"
+						/>
+					</template>
+				</origam-list-children>
+			</slot>
+		</origam-defaults-provider>
 	</component>
 </template>
 
 <script setup>
 import { computed, ref, shallowRef, StyleValue, toRef, useSlots } from "vue";
-import { OrigamListChildren } from "../../components";
+import { OrigamDefaultsProvider, OrigamListChildren } from "../../components";
 import {
   useBorder,
   useBothColor,
@@ -96,7 +98,8 @@ import {
   useNested,
   usePadding,
   useProps,
-  useRounded
+  useRounded,
+  useStyle
 } from "../../composables";
 import { DENSITY, KEYBOARD_VALUES, LINES, OPEN_STRATEGY, SELECT_STRATEGY } from "../../enums";
 import { deepEqual, focusChild } from "../../utils";
@@ -124,7 +127,7 @@ const props = defineProps({
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
-  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 },
@@ -149,10 +152,6 @@ const props = defineProps({
   valueComparator: { type: null, required: false, default: deepEqual },
   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 },
@@ -170,8 +169,15 @@ const props = defineProps({
 });
 defineEmits(["update:selected", "update:opened", "click:open", "click:select"]);
 const { filterProps } = useProps(props);
+const slotDefaults = computed(() => ({
+  "origam-list-item": {
+    density: props.density,
+    color: props.color,
+    bgColor: props.bgColor
+  }
+}));
 const { items } = useItems(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 { dimensionStyles } = useDimension(props);
 const { elevationClasses } = useElevation(props);
@@ -263,6 +269,7 @@ const listClasses = computed(() => {
       "origam-list--nav": props.nav,
       "origam-list--slim": props.slim
     },
+    colorClasses.value,
     borderClasses.value,
     paddingClasses.value,
     marginClasses.value,
@@ -273,38 +280,44 @@ const listClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(listStyles);
 defineExpose({
   open,
   select,
   focus,
   children,
   parents,
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
 <style lang="scss" scoped>
 	.origam-list {
-		padding-block-start: var(--origam-list---padding-block-start);
-		padding-block-end: var(--origam-list---padding-block-end);
-		padding-inline-start: var(--origam-list---padding-inline-start);
-		padding-inline-end: var(--origam-list---padding-inline-end);
+		padding-block-start: var(--origam-list---padding-block-start, 8px);
+		padding-block-end: var(--origam-list---padding-block-end, 8px);
+		padding-inline-start: var(--origam-list---padding-inline-start, 0);
+		padding-inline-end: var(--origam-list---padding-inline-end, 0);
 
-		position: var(--origam-list---position);
-		overflow: var(--origam-list---overflow);
-		outline: var(--origam-list---outline);
+		position: var(--origam-list---position, relative);
+		overflow: var(--origam-list---overflow, auto);
+		outline: var(--origam-list---outline, none);
 
-		border-color: var(--origam-list---border-color);
-		border-style: var(--origam-list---border-style);
-		border-width: var(--origam-list---border-width);
-		border-radius: var(--origam-list---border-radius);
+		border-color: var(--origam-list---border-color, var(--origam-color__text---primary));
+		border-style: var(--origam-list---border-style, solid);
+		border-width: var(--origam-list---border-width, 0);
+		border-radius: var(--origam-list---border-radius, 0px);
 
-		background: var(--origam-list---background);
-		box-shadow: var(--origam-list---box-shadow);
-		color: var(--origam-list---color);
+		background: var(--origam-list---background, var(--origam-color__surface---default));
+		box-shadow: var(--origam-list---box-shadow, var(--origam-shadow---none));
+		color: var(--origam-list---color, var(--origam-color__text---primary));
 
-		pointer-events: var(--origam-list---pointer-events);
-		user-select: var(--origam-list---user-select);
+		pointer-events: var(--origam-list---pointer-events, auto);
+		user-select: var(--origam-list---user-select, auto);
 
 		&--border {
 			--origam-list---border-width: thin;
@@ -318,12 +331,36 @@ defineExpose({
 
 		&--nav {
 			--origam-list---padding-inline: 8px;
-			--origam-list-subheader---font-size: 0.75rem;
-			--origam-list---indent-padding: -8px;
+			--origam-list-subheader---font-size: var(--origam-list__subheader---nav-font-size, 0.75rem);
+			--origam-list---indent-padding: var(--origam-list---indent-padding-nav, -8px);
 		}
 
 		&--rounded {
-			--origam-list---border-radius: 4px;
+			--origam-list---border-radius: var(--origam-radius---2xl, 24px);
+		}
+
+		&--rounded-x-small {
+			--origam-list---border-radius: var(--origam-radius---xs, 2px);
+		}
+
+		&--rounded-small {
+			--origam-list---border-radius: var(--origam-radius---sm, 4px);
+		}
+
+		&--rounded-default {
+			--origam-list---border-radius: var(--origam-radius---md, 8px);
+		}
+
+		&--rounded-medium {
+			--origam-list---border-radius: var(--origam-radius---lg, 12px);
+		}
+
+		&--rounded-large {
+			--origam-list---border-radius: var(--origam-radius---xl, 16px);
+		}
+
+		&--rounded-x-large {
+			--origam-list---border-radius: var(--origam-radius---2xl, 24px);
 		}
 
 		&--subheader {
@@ -331,7 +368,7 @@ defineExpose({
 		}
 
 		&--slim {
-			--origam-list-group---prepend-width: var(--origam-list--slim---prepend-width);
+			--origam-list-group---prepend-width: var(--origam-list---slim-prepend-width, 28px);
 		}
 
 		&--density-default {
@@ -343,68 +380,18 @@ defineExpose({
 		}
 
 		&__overlay {
-			background-color: var(--origam-list__overlay---background-color);
-			border-radius: var(--origam-list__overlay---border-radius);
-			opacity: var(--origam-list__overlay---opacity);
-			pointer-events: var(--origam-list__overlay---pointer-events);
-			position: var(--origam-list__overlay---position);
-			bottom: var(--origam-list__overlay---position-bottom);
-			left: var(--origam-list__overlay---position-left);
-			right: var(--origam-list__overlay---position-right);
-			top: var(--origam-list__overlay---position-top);
-			transition-property: var(--origam-list__overlay---transition-property);
-			transition-duration: var(--origam-list__overlay---transition-duration);
-			transition-timing-function: var(--origam-list__overlay---transition-timing-function);
+			background-color: var(--origam-list__overlay---background-color, var(--origam-color__overlay---scrim));
+			border-radius: var(--origam-list__overlay---border-radius, inherit);
+			opacity: var(--origam-list__overlay---opacity, 0);
+			pointer-events: var(--origam-list__overlay---pointer-events, none);
+			position: var(--origam-list__overlay---position, absolute);
+			bottom: var(--origam-list__overlay---position-bottom, 0);
+			left: var(--origam-list__overlay---position-left, 0);
+			right: var(--origam-list__overlay---position-right, 0);
+			top: var(--origam-list__overlay---position-top, 0);
+			transition-property: var(--origam-list__overlay---transition-property, opacity);
+			transition-duration: var(--origam-list__overlay---transition-duration, 0.2s);
+			transition-timing-function: var(--origam-list__overlay---transition-timing-function, ease-in-out);
 		}
 	}
 </style>
-
-<style>
-	:root {
-		--origam-list---indent-padding: 0px;
-
-		--origam-list---border-top-width: 0;
-		--origam-list---border-left-width: 0;
-		--origam-list---border-bottom-width: 0;
-		--origam-list---border-right-width: 0;
-		--origam-list---border-width: var(--origam-list---border-top-width) var(--origam-list---border-left-width) var(--origam-list---border-bottom-width) var(--origam-list---border-right-width);
-		--origam-list---border-color: rgba(0, 0, 0, 0.87);
-		--origam-list---border-style: solid;
-		--origam-list---border-start-start-radius: 0;
-		--origam-list---border-start-end-radius: 0;
-		--origam-list---border-end-start-radius: 0;
-		--origam-list---border-end-end-radius: 0;
-		--origam-list---border-radius: var(--origam-list---border-start-start-radius) var(--origam-list---border-start-end-radius) var(--origam-list---border-end-start-radius) var(--origam-list---border-end-end-radius);
-
-		--origam-list---padding-block-start: 8px;
-		--origam-list---padding-block-end: 8px;
-		--origam-list---padding-inline-start: 0;
-		--origam-list---padding-inline-end: 0;
-
-		--origam-list---overflow: auto;
-		--origam-list---position: relative;
-		--origam-list---outline: none;
-
-		--origam-list---pointer-events: auto;
-		--origam-list---user-select: auto;
-
-		--origam-list---color: rgba(0, 0, 0, 0.87);
-		--origam-list---box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
-		--origam-list---background: rgb(255, 255, 255);
-
-		--origam-list__overlay---background-color: #000;
-		--origam-list__overlay---border-radius: inherit;
-		--origam-list__overlay---opacity: 0;
-		--origam-list__overlay---pointer-events: none;
-		--origam-list__overlay---position: absolute;
-		--origam-list__overlay---position-bottom: 0;
-		--origam-list__overlay---position-left: 0;
-		--origam-list__overlay---position-right: 0;
-		--origam-list__overlay---position-top: 0;
-		--origam-list__overlay---transition-property: opacity;
-		--origam-list__overlay---transition-duration: 0.2s;
-		--origam-list__overlay---transition-timing-function: ease-in-out;
-
-		--origam-list--slim---prepend-width: 28px;
-	}
-</style>

package/dist/src/components/List/OrigamListGroup.vue

@@ -4,54 +4,55 @@
 			:class="listGroupClasses"
 			:style="listGroupStyles"
 	>
-		<slot name="default">
-			<origam-list-group-activator class="origam-list-group__activator">
-				<slot
-						name="activator"
-						v-bind="{ events: activatorEvents, props: activatorProps, isOpen, toggleIcon }"
-				>
-					<origam-list-item
-							:active="isOpen"
-							:append-icon="appendActivatorIcon"
-							:prepend-icon="prependActivatorIcon"
-							:title="title"
-							:value="value"
-							v-bind="activatorProps"
-							v-on="activatorEvents"
-					/>
-				</slot>
-			</origam-list-group-activator>
+		<origam-defaults-provider :defaults="slotDefaults">
+			<slot name="default">
+				<origam-list-group-activator class="origam-list-group__activator">
+					<slot
+							name="activator"
+							v-bind="{ events: activatorEvents, props: activatorProps, isOpen, toggleIcon }"
+					>
+						<origam-list-item
+								:active="isOpen"
+								:append-icon="appendActivatorIcon"
+								:prepend-icon="prependActivatorIcon"
+								:title="title"
+								:value="value"
+								v-bind="activatorProps"
+								v-on="activatorEvents"
+						/>
+					</slot>
+				</origam-list-group-activator>
 
-			<origam-transition
-					:disabled="!isBooted"
-					:transition="transition"
-			>
-				<div
-						v-if="isOpen"
-						:aria-labelledby="id"
-						class="origam-list-group__items"
-						role="group"
+				<origam-transition
+						:disabled="!isBooted"
+						:transition="transition"
 				>
-					<slot name="items"/>
-				</div>
-			</origam-transition>
-		</slot>
+					<div
+							v-if="isOpen"
+							:aria-labelledby="id"
+							class="origam-list-group__items"
+							role="group"
+					>
+						<slot name="items"/>
+					</div>
+				</origam-transition>
+			</slot>
+		</origam-defaults-provider>
 	</component>
 </template>
 
 <script setup>
 import { computed, ref, StyleValue, toRef } from "vue";
-import { OrigamExpandY, OrigamListGroupActivator, OrigamListItem, OrigamTransition } from "../../components";
+import { OrigamDefaultsProvider, OrigamExpandY, OrigamListGroupActivator, OrigamListItem, OrigamTransition } from "../../components";
 import {
-  useBorder,
   useBothColor,
+  useHover,
   useList,
-  useMargin,
   useNestedItem,
-  usePadding,
   useProps,
-  useRounded,
-  useSsrBoot
+  useSsrBoot,
+  useStateEffect,
+  useStyle
 } from "../../composables";
 import { MDI_ICONS } from "../../enums";
 const props = defineProps({
@@ -66,10 +67,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 },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },
@@ -93,7 +90,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 },
@@ -101,15 +98,31 @@ 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 },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
+  hover: { type: [Boolean, Object], required: false }
 });
 const emits = defineEmits(["click:activator"]);
+const { isHover, hoverState } = useHover(props);
+const {
+  borderClasses,
+  borderStyles,
+  roundedClasses,
+  roundedStyles,
+  paddingClasses,
+  paddingStyles,
+  marginClasses,
+  marginStyles
+} = useStateEffect(props, isHover, void 0, hoverState, void 0);
 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 slotDefaults = computed(() => ({
+  "origam-list-item": {
+    color: props.color,
+    bgColor: props.bgColor
+  }
+}));
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { isOpen, open, id: _id } = useNestedItem(toRef(props, "value"), true);
 const id = computed(() => `origam-list-group--id-${String(_id.value)}`);
 const list = useList();
@@ -157,6 +170,7 @@ const listGroupClasses = computed(() => {
       "origam-list-group--fluid": props.fluid,
       "origam-list-group--open": isOpen.value
     },
+    colorClasses.value,
     roundedClasses.value,
     borderClasses.value,
     paddingClasses.value,
@@ -164,9 +178,16 @@ const listGroupClasses = computed(() => {
     props.class
   ];
 });
+const { id: styleId, css, load, isLoaded, unload } = useStyle(listGroupStyles);
 defineExpose({
   isOpen,
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded,
+  styleId
 });
 </script>
 
@@ -175,19 +196,19 @@ defineExpose({
 		$this: &;
 
 		&--fluid {
-			--origam-list-group---list-indent-size: var(--origam-list-group--fluid---list-indent-size);
+			--origam-list-group---list-indent-size: var(--origam-list-group--fluid---list-indent-size, 0px);
 
 			&#{$this}--prepend {
-				--origam-list-group---parent-padding: var(--origam-list---indent-padding);
+				--origam-list-group---parent-padding: var(--origam-list---indent-padding, 0px);
 			}
 		}
 
 		&--prepend {
-			--origam-list-group---parent-padding: calc(var(--origam-list---indent-padding) + var(--origam-list-group---prepend-width));
+			--origam-list-group---parent-padding: calc(var(--origam-list---indent-padding, 0px) + var(--origam-list-group---prepend-width, 16px));
 		}
 
 		&__items {
-			--origam-list---indent-padding: calc(var(--origam-list-group---parent-padding) + var(--origam-list-group---list-indent-size));
+			--origam-list---indent-padding: calc(var(--origam-list-group---parent-padding, 0px) + var(--origam-list-group---list-indent-size, 16px));
 		}
 
 		&__header {
@@ -197,13 +218,13 @@ defineExpose({
 				&--active {
 					&:not(:focus-visible) {
 						#{$item}__overlay {
-							opacity: var(--origam-list-group__header--active---opacity);
+							opacity: var(--origam-list-group__header--active---opacity, 0);
 						}
 					}
 
 					&:hover {
 						#{$item}__overlay {
-							opacity: var(--origam-list-group__header--active--hover---opacity);
+							opacity: var(--origam-list-group__header--active--hover---opacity, calc(0.04 * 1));
 						}
 					}
 				}
@@ -211,16 +232,3 @@ defineExpose({
 		}
 	}
 </style>
-
-<style>
-	:root {
-		--origam-list-group---list-indent-size: 16px;
-		--origam-list-group---parent-padding: var(--origam-list---indent-padding);
-		--origam-list-group---prepend-width: 16px;
-
-		--origam-list-group--fluid---list-indent-size: 0px;
-
-		--origam-list-group__header--active---opacity: 0;
-		--origam-list-group__header--active--hover---opacity: calc(0.04 * 1);
-	}
-</style>

package/dist/src/components/List/OrigamListGroupActivator.vue

@@ -10,7 +10,11 @@
 
 <script setup>
 import { computed, StyleValue } from "vue";
-import { useNestedGroupActivator, useProps } from "../../composables";
+import {
+  useNestedGroupActivator,
+  useProps,
+  useStyle
+} from "../../composables";
 const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -30,7 +34,13 @@ const activatorClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(activatorStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>