nuance-ui 0.2.8 → 0.2.10

package/dist/runtime/components/box.vue

@@ -16,7 +16,7 @@ const _mod = computed(() => {
 </script>
 
 <template>
-	<component :is v-bind='_mod'>
-		<slot />
-	</component>
+	<component :is v-bind='_mod'>
+		<slot />
+	</component>
 </template>

package/dist/runtime/components/breadcrumbs.vue

@@ -33,85 +33,85 @@ const breadcrumbs = computed(() => unref(items) ?? []);
 </script>
 
 <template>
-	<Box :is :mod :style	:class='$style.root' aria-label='breadcrumb'>
-		<template v-for='(item, ix) in breadcrumbs' :key='item.to'>
-			<li :class='$style.breadcrumb' role='presentation' aria-hidden='true'>
-				<slot
-					:name='item.slot ?? "item"'
-					:item='item'
-					:ix='ix'
-					:active='item.active ?? ix === breadcrumbs.length - 1'
-				>
-					<Button
-						:size
-						:variant
-						:class='$style.item'
-						:mod='{ active: item.active ?? ix === breadcrumbs.length - 1 }'
-						:color='item.active ?? ix === breadcrumbs.length - 1 ? color : inactive'
-						@click.stop.prevent='$emit("click", item)'
-					>
-						<template v-if='item?.icon' #leftSection>
-							<Icon :name='item.icon' :class='$style.icon' />
-						</template>
-						{{ item.label }}
-					</Button>
-				</slot>
-			</li>
-			<li v-if='ix < breadcrumbs.length - 1' role='presentation' aria-hidden='true' :class='$style.separator'>
-				<slot name='separator'>
-					<Icon :name='separator' />
-				</slot>
-			</li>
-		</template>
-	</Box>
+	<Box :is :mod :style	:class='$style.root' aria-label='breadcrumb'>
+		<template v-for='(item, ix) in breadcrumbs' :key='item.to'>
+			<li :class='$style.breadcrumb' role='presentation' aria-hidden='true'>
+				<slot
+					:name='item.slot ?? "item"'
+					:item='item'
+					:ix='ix'
+					:active='item.active ?? ix === breadcrumbs.length - 1'
+				>
+					<Button
+						:size
+						:variant
+						:class='$style.item'
+						:mod='{ active: item.active ?? ix === breadcrumbs.length - 1 }'
+						:color='item.active ?? ix === breadcrumbs.length - 1 ? color : inactive'
+						@click.stop.prevent='$emit("click", item)'
+					>
+						<template v-if='item?.icon' #leftSection>
+							<Icon :name='item.icon' :class='$style.icon' />
+						</template>
+						{{ item.label }}
+					</Button>
+				</slot>
+			</li>
+			<li v-if='ix < breadcrumbs.length - 1' role='presentation' aria-hidden='true' :class='$style.separator'>
+				<slot name='separator'>
+					<Icon :name='separator' />
+				</slot>
+			</li>
+		</template>
+	</Box>
 </template>
 
 <style module lang="postcss">
-.root {
-	--bc-spacing: var(--spacing-xs);
-
-	display: flex;
-	flex-wrap: wrap;
-	gap: var(--bc-spacing);
-	align-items: center;
-}
-
-.breadcrumb {
-	line-height: 1;
-
-	color: var(--color-text);
-	white-space: nowrap;
-	-webkit-tap-highlight-color: transparent;
-
-}
-
-.item {
-	display: flex;
-	gap: .25rem;
-	align-items: center;
-
-	font-weight: 600;
-	text-transform: capitalize;
-}
-
-.icon {
-	width: 1.2em;
-	height: 1.2em;
-}
-
-.separator {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	line-height: 1;
-
-	@mixin where-light {
-		color: var(--color-gray-7);
-	}
-
-	@mixin where-dark {
-		color: var(--color-dark-2);
-	}
-}
+.root {
+	--bc-spacing: var(--spacing-xs);
+
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--bc-spacing);
+	align-items: center;
+}
+
+.breadcrumb {
+	line-height: 1;
+
+	color: var(--color-text);
+	white-space: nowrap;
+	-webkit-tap-highlight-color: transparent;
+
+}
+
+.item {
+	display: flex;
+	gap: .25rem;
+	align-items: center;
+
+	font-weight: 600;
+	text-transform: capitalize;
+}
+
+.icon {
+	width: 1.2em;
+	height: 1.2em;
+}
+
+.separator {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	line-height: 1;
+
+	@mixin where-light {
+		color: var(--color-gray-7);
+	}
+
+	@mixin where-dark {
+		color: var(--color-dark-2);
+	}
+}
 </style>

package/dist/runtime/components/button/button.d.vue.ts

@@ -37,6 +37,11 @@ export interface ButtonProps extends BoxProps {
     rightSectionPE?: CSSStyleDeclaration['pointerEvents'];
     /** Extra attributes forwarded to the right section element */
     rightSectionProps?: HTMLAttributes;
+    /**
+     * Sets `justify-content` of `inner` element, can be used to change distribution of sections and label
+     *  @default 'center'
+     */
+    justify?: CSSStyleDeclaration['justifyContent'];
 }
 declare var __VLS_19: {}, __VLS_26: {}, __VLS_28: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/button/button.module.css

@@ -1 +1 @@
-.root{--button-height-xs:rem(30px);--button-height-sm:rem(36px);--button-height-md:rem(42px);--button-height-lg:rem(50px);--button-height-xl:rem(60px);--button-height-compact-xs:rem(22px);--button-height-compact-sm:rem(26px);--button-height-compact-md:rem(30px);--button-height-compact-lg:rem(34px);--button-height-compact-xl:rem(40px);--button-padding-x-xs:rem(14px);--button-padding-x-sm:rem(18px);--button-padding-x-md:rem(22px);--button-padding-x-lg:rem(26px);--button-padding-x-xl:rem(32px);--button-padding-x-compact-xs:rem(7px);--button-padding-x-compact-sm:rem(8px);--button-padding-x-compact-md:rem(10px);--button-padding-x-compact-lg:rem(12px);--button-padding-x-compact-xl:rem(14px);--button-height:var(--button-height-sm);--button-padding-x:var(--button-padding-x-sm);--button-color:var(--color-white);--button-fz:var(--font-size-sm);--button-bg:var(--color-primary-filled);--button-radius:var(--radius-default);--button-hover:var(--color-primary-filled-hover);--button-spacing:0;--button-section-size:calc(var(--button-height) - 0.25rem);background:var(--button-bg);border:var(--button-bd,rem(1px) solid transparent);border-radius:var(--button-radius);color:var(--button-color,var(--color-white));cursor:pointer;display:inline-block;font-size:var(--button-fz);font-weight:600;height:var(--button-height,var(--button-height-sm));line-height:1;overflow:hidden;padding-inline:var(--button-padding-x,var(--button-padding-x-sm));position:relative;text-align:center;transition:background-color .2s ease-in,color .2s ease-in;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:auto}.root:where([data-with-left-section]){padding-inline-start:0}.root:where([data-with-right-section]){padding-inline-end:0}.root:where([data-variant=gradient-outline]){background-clip:padding-box,border-box;background-origin:border-box}.root:where(:disabled:not([data-loading])){background:var(--color-disabled);border:1px solid transparent;color:var(--color-disabled);cursor:not-allowed;transform:none}.root:before{border-radius:var(--button-radius,var(--radius-default));content:"";filter:blur(12px);inset:-1px;opacity:0;pointer-events:none;position:absolute;transform:translateY(-100%);transition:transform .15s ease,opacity .1s ease;@mixin where-light{background:var(--color-gray-1);color:var(--color-gray-5)}@mixin where-dark{background:var(--color-dark-6);color:var(--color-dark-3)}}.root:where([data-loading]){cursor:not-allowed;transform:none}.root:where([data-loading]):before{opacity:1;transform:translateY(0)}.root:where([data-loading]) .inner{opacity:0;transform:translateY(100%)}.root:hover:where(:not([data-loading],:disabled)){background:var(--button-hover);color:var(--button-color)}.root:hover:where(:not([data-loading],:disabled)):where([data-variant=gradient-outline]){color:#fff}.inner{gap:var(--button-spacing);justify-content:center;overflow:visible;transition:transform .15s ease,opacity .1s ease;width:100%}.inner,.label{align-items:center;display:flex;height:100%}.label{flex:1;opacity:1;overflow:hidden;white-space:nowrap}.label:where([data-loading]){opacity:.2}.section{--section-pointer-events:none;align-items:center;display:flex;height:100%;justify-content:center;pointer-events:var(--section-pointer-events);width:var(--button-section-size)}.loader{left:calc(50% - var(--loader-size)/2);position:absolute;top:calc(50% - var(--loader-size)/2)}.group{--group-border-width:1px;display:flex}.group>:where(*):focus{position:relative;z-index:1}.group[data-orientation=horizontal]{flex-direction:row}.group[data-orientation=horizontal]>:where(*):not(:only-child):first-child{border-end-end-radius:0;border-inline-end-width:calc(var(--group-border-width)/2);border-start-end-radius:0}.group[data-orientation=horizontal]>:where(*):not(:only-child):last-child{border-end-start-radius:0;border-inline-start-width:calc(var(--group-border-width)/2);border-start-start-radius:0}.group[data-orientation=horizontal]>:where(*):not(:only-child):not(:first-child):not(:last-child){border-inline-width:calc(var(--group-border-width)/2);border-radius:0}.group[data-orientation=vertical]{flex-direction:column}.group[data-orientation=vertical]>:where(*):not(:only-child):first-child{border-bottom-width:calc(var(--group-border-width)/2);border-end-end-radius:0;border-end-start-radius:0}.group[data-orientation=vertical]>:where(*):not(:only-child):last-child{border-start-end-radius:0;border-start-start-radius:0;border-top-width:calc(var(--group-border-width)/2)}.group[data-orientation=vertical]>:where(*):not(:only-child):not(:first-child):not(:last-child){border-bottom-width:calc(var(--group-border-width)/2);border-radius:0;border-top-width:calc(var(--group-border-width)/2)}
+.root{--button-height-xs:rem(30px);--button-height-sm:rem(36px);--button-height-md:rem(42px);--button-height-lg:rem(50px);--button-height-xl:rem(60px);--button-height-compact-xs:rem(22px);--button-height-compact-sm:rem(26px);--button-height-compact-md:rem(30px);--button-height-compact-lg:rem(34px);--button-height-compact-xl:rem(40px);--button-padding-x-xs:rem(14px);--button-padding-x-sm:rem(18px);--button-padding-x-md:rem(22px);--button-padding-x-lg:rem(26px);--button-padding-x-xl:rem(32px);--button-padding-x-compact-xs:rem(7px);--button-padding-x-compact-sm:rem(8px);--button-padding-x-compact-md:rem(10px);--button-padding-x-compact-lg:rem(12px);--button-padding-x-compact-xl:rem(14px);--button-height:var(--button-height-sm);--button-padding-x:var(--button-padding-x-sm);--button-color:var(--color-white);--button-fz:var(--font-size-sm);--button-bg:var(--color-primary-filled);--button-radius:var(--radius-default);--button-hover:var(--color-primary-filled-hover);--button-spacing:0;--button-justify:center;--button-section-size:calc(var(--button-height) - 0.25rem);background:var(--button-bg);border:var(--button-bd,rem(1px) solid transparent);border-radius:var(--button-radius);color:var(--button-color,var(--color-white));cursor:pointer;display:inline-block;font-size:var(--button-fz);font-weight:600;height:var(--button-height,var(--button-height-sm));line-height:1;overflow:hidden;padding-inline:var(--button-padding-x,var(--button-padding-x-sm));position:relative;text-align:center;transition:background-color .2s ease-in,color .2s ease-in;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:auto}.root:where([data-with-left-section]){padding-inline-start:0}.root:where([data-with-right-section]){padding-inline-end:0}.root:where([data-variant=gradient-outline]){background-clip:padding-box,border-box;background-origin:border-box}.root:where(:disabled:not([data-loading])){background:var(--color-disabled);border:1px solid transparent;color:var(--color-disabled);cursor:not-allowed;transform:none}.root:before{border-radius:var(--button-radius,var(--radius-default));content:"";filter:blur(12px);inset:-1px;opacity:0;pointer-events:none;position:absolute;transform:translateY(-100%);transition:transform .15s ease,opacity .1s ease;@mixin where-light{background:var(--color-gray-1);color:var(--color-gray-5)}@mixin where-dark{background:var(--color-dark-6);color:var(--color-dark-3)}}.root:where([data-loading]){cursor:not-allowed;transform:none}.root:where([data-loading]):before{opacity:1;transform:translateY(0)}.root:where([data-loading]) .inner{opacity:0;transform:translateY(100%)}.root:hover:where(:not([data-loading],:disabled)){background:var(--button-hover);color:var(--button-color)}.root:hover:where(:not([data-loading],:disabled)):where([data-variant=gradient-outline]){color:#fff}.inner{gap:var(--button-spacing);justify-content:center;overflow:visible;transition:transform .15s ease,opacity .1s ease;width:100%}.inner,.label{align-items:center;display:flex;height:100%}.label{flex:1;justify-content:var(--button-justify);opacity:1;overflow:hidden;white-space:nowrap}.label:where([data-loading]){opacity:.2}.section{--section-pointer-events:none;align-items:center;display:flex;height:100%;justify-content:center;pointer-events:var(--section-pointer-events);width:var(--button-section-size)}.loader{left:calc(50% - var(--loader-size)/2);position:absolute;top:calc(50% - var(--loader-size)/2)}.group{--group-border-width:1px;display:flex}.group>:where(*):focus{position:relative;z-index:1}.group[data-orientation=horizontal]{flex-direction:row}.group[data-orientation=horizontal]>:where(*):not(:only-child):first-child{border-end-end-radius:0;border-inline-end-width:calc(var(--group-border-width)/2);border-start-end-radius:0}.group[data-orientation=horizontal]>:where(*):not(:only-child):last-child{border-end-start-radius:0;border-inline-start-width:calc(var(--group-border-width)/2);border-start-start-radius:0}.group[data-orientation=horizontal]>:where(*):not(:only-child):not(:first-child):not(:last-child){border-inline-width:calc(var(--group-border-width)/2);border-radius:0}.group[data-orientation=vertical]{flex-direction:column}.group[data-orientation=vertical]>:where(*):not(:only-child):first-child{border-bottom-width:calc(var(--group-border-width)/2);border-end-end-radius:0;border-end-start-radius:0}.group[data-orientation=vertical]>:where(*):not(:only-child):last-child{border-start-end-radius:0;border-start-start-radius:0;border-top-width:calc(var(--group-border-width)/2)}.group[data-orientation=vertical]>:where(*):not(:only-child):not(:first-child):not(:last-child){border-bottom-width:calc(var(--group-border-width)/2);border-radius:0;border-top-width:calc(var(--group-border-width)/2)}

package/dist/runtime/components/button/button.vue

@@ -20,7 +20,8 @@ const {
   rightSectionProps,
   is = "button",
   radius,
-  mod: _mod
+  mod: _mod,
+  justify
 } = defineProps({
   size: { type: null, required: false },
   spacing: { type: String, required: false },
@@ -35,6 +36,7 @@ const {
   icon: { type: String, required: false },
   rightSectionPE: { type: null, required: false },
   rightSectionProps: { type: Object, required: false },
+  justify: { type: null, required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
@@ -48,6 +50,7 @@ const style = computed(() => useStyleResolver((theme) => {
   } = createVariantColorResolver({ variant, color, theme, gradient });
   return {
     root: {
+      "--button-justify": justify,
       "--button-height": getSize(size, "button-height"),
       "--button-padding-x": getSize(size, "button-padding-x"),
       "--button-fz": size?.includes("compact") ? getFontSize(size.replace("compact-", "")) : getFontSize(size),
@@ -69,50 +72,50 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<Box
-		:is
-		type='button'
+	<Box
+		:is
+		type='button'
 		:mod='[
   {
     "with-left-section": !!$slots?.leftSection || !!icon,
     "with-right-section": !!$slots?.rightSection
   },
   mod
-]'
-		:style='style.root'
-		:class='[css.root, classes?.root]'
-		:disabled='loading'
-	>
-		<Transition name='fade-down'>
-			<Loader v-show='loading' :class='css.loader' :color :size />
-		</Transition>
-
-		<span :class='[css.inner, classes?.inner]'>
-			<span
-				v-if='$slots.leftSection || icon'
-				:class='[css.section, classes?.section]'
-				data-position='left'
-				v-bind='leftSectionProps'
-				:style='style.leftSection'
-			>
-				<slot name='leftSection'>
-					<Icon v-if='icon' :name='icon' />
-				</slot>
-			</span>
-
-			<span :class='[css.label, classes?.label]'>
-				<slot />
-			</span>
-
-			<span
-				v-if='$slots.rightSection'
-				data-position='right'
-				:class='[css.section, classes?.section]'
-				v-bind='rightSectionProps'
-				:style='style.rightSection'
-			>
-				<slot name='rightSection' />
-			</span>
-		</span>
-	</Box>
+]'
+		:style='style.root'
+		:class='[css.root, classes?.root]'
+		:disabled='loading'
+	>
+		<Transition name='fade-down'>
+			<Loader v-show='loading' :class='css.loader' :color :size />
+		</Transition>
+
+		<span :class='[css.inner, classes?.inner]'>
+			<span
+				v-if='$slots.leftSection || icon'
+				:class='[css.section, classes?.section]'
+				data-position='left'
+				v-bind='leftSectionProps'
+				:style='style.leftSection'
+			>
+				<slot name='leftSection'>
+					<Icon v-if='icon' :name='icon' />
+				</slot>
+			</span>
+
+			<span :class='[css.label, classes?.label]'>
+				<slot />
+			</span>
+
+			<span
+				v-if='$slots.rightSection'
+				data-position='right'
+				:class='[css.section, classes?.section]'
+				v-bind='rightSectionProps'
+				:style='style.rightSection'
+			>
+				<slot name='rightSection' />
+			</span>
+		</span>
+	</Box>
 </template>

package/dist/runtime/components/button/button.vue.d.ts

@@ -37,6 +37,11 @@ export interface ButtonProps extends BoxProps {
     rightSectionPE?: CSSStyleDeclaration['pointerEvents'];
     /** Extra attributes forwarded to the right section element */
     rightSectionProps?: HTMLAttributes;
+    /**
+     * Sets `justify-content` of `inner` element, can be used to change distribution of sections and label
+     *  @default 'center'
+     */
+    justify?: CSSStyleDeclaration['justifyContent'];
 }
 declare var __VLS_19: {}, __VLS_26: {}, __VLS_28: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/button/unstyled-button.vue

@@ -9,30 +9,30 @@ const { is = "button", ...props } = defineProps({
 </script>
 
 <template>
-	<Box :is :class='$style.unstyled' v-bind='props' type='button'>
-		<slot />
-	</Box>
+	<Box :is :class='$style.unstyled' v-bind='props' type='button'>
+		<slot />
+	</Box>
 </template>
 
 <style module lang="postcss">
-:where(.unstyled) {
-	touch-action: manipulation;
-	cursor: pointer;
-
-	padding: 0;
-	border: 0;
-
-	font-size: var(--font-size-md);
-	color: inherit;
-	text-align: left;
-	text-decoration: none;
-
-	appearance: none;
-	background-color: transparent;
-	-webkit-tap-highlight-color: transparent;
-
-	@mixin where-rtl {
-		text-align: right;
-	}
-}
+:where(.unstyled) {
+	touch-action: manipulation;
+	cursor: pointer;
+
+	padding: 0;
+	border: 0;
+
+	font-size: var(--font-size-md);
+	color: inherit;
+	text-align: left;
+	text-decoration: none;
+
+	appearance: none;
+	background-color: transparent;
+	-webkit-tap-highlight-color: transparent;
+
+	@mixin where-rtl {
+		text-align: right;
+	}
+}
 </style>

package/dist/runtime/components/calendar/calendar.vue

@@ -42,86 +42,86 @@ const [calendars, nav] = useCalendarNavigation({
 </script>
 
 <template>
-	<CalendarRoot
-		v-slot='{ config }'
-		v-model:date='date'
-		v-model:select='select'
-		v-bind='props'
-		:class='$style.content'
-		@select='(select) => $emit("select", select)'
-	>
-		<section v-for='(calendar, ix) in calendars' :key='`calendar-${ix}`'>
-			<CalendarHeader
-				:with-prev='ix === 0'
-				:with-next='ix === calendars.length - 1'
-				:prev-disabled='nav.isPrevDisabled'
-				:next-disabled='nav.isNextDisabled'
+	<CalendarRoot
+		v-slot='{ config }'
+		v-model:date='date'
+		v-model:select='select'
+		v-bind='props'
+		:class='$style.content'
+		@select='(select) => $emit("select", select)'
+	>
+		<section v-for='(calendar, ix) in calendars' :key='`calendar-${ix}`'>
+			<CalendarHeader
+				:with-prev='ix === 0'
+				:with-next='ix === calendars.length - 1'
+				:prev-disabled='nav.isPrevDisabled'
+				:next-disabled='nav.isNextDisabled'
 				@prev='() => {
   nav.move(-1);
   $emit("prev");
-}'
+}'
 				@next='() => {
   nav.move(1);
   $emit("next");
-}'
+}'
 				@level='() => {
   level = nav.nextLevel();
   $emit("level");
-}'
-			>
-				<slot name='level' :config>
-					{{ nav.getLevelLabel(calendar, config) }}
-				</slot>
-			</CalendarHeader>
-
-			<CalendarMonth
-				v-if='level === "month"'
-				:month='calendar'
-				:with-week-numbers='props.withWeekNumbers'
-				:with-cell-spacing='props.withCellSpacing'
-				:size
-			>
-				<template v-if='!!$slots.weekday' #weekday>
-					<slot name='weekday' />
-				</template>
-
-				<slot name='day' />
-			</CalendarMonth>
-			<CalendarYear
-				v-if='level === "year"'
-				:year='calendar'
-				:size
-				:selectable='props.minLevel === "year"'
+}'
+			>
+				<slot name='level' :config>
+					{{ nav.getLevelLabel(calendar, config) }}
+				</slot>
+			</CalendarHeader>
+
+			<CalendarMonth
+				v-if='level === "month"'
+				:month='calendar'
+				:with-week-numbers='props.withWeekNumbers'
+				:with-cell-spacing='props.withCellSpacing'
+				:size
+			>
+				<template v-if='!!$slots.weekday' #weekday>
+					<slot name='weekday' />
+				</template>
+
+				<slot name='day' />
+			</CalendarMonth>
+			<CalendarYear
+				v-if='level === "year"'
+				:year='calendar'
+				:size
+				:selectable='props.minLevel === "year"'
 				@select='(month) => {
   if (props.minLevel !== "year") {
     level = nav.prevLevel();
     date = month;
   }
-}'
-			/>
-			<CalendarDecade
-				v-if='level === "decade"'
-				:date='calendar'
-				:size
-				:selectable='props.minLevel === "decade"'
+}'
+			/>
+			<CalendarDecade
+				v-if='level === "decade"'
+				:date='calendar'
+				:size
+				:selectable='props.minLevel === "decade"'
 				@select='(year) => {
   if (props.minLevel !== "decade") {
     level = nav.prevLevel();
     date = year;
   }
-}'
-			/>
-		</section>
-	</CalendarRoot>
+}'
+			/>
+		</section>
+	</CalendarRoot>
 </template>
 
 <style lang="postcss" module>
-.content {
-	--calendar-cell-spacing: rem(1px);
-
-	display: flex;
-	gap: var(--spacing-sm);
-
-	width: fit-content;
-}
+.content {
+	--calendar-cell-spacing: rem(1px);
+
+	display: flex;
+	gap: var(--spacing-sm);
+
+	width: fit-content;
+}
 </style>