nuance-ui 0.2.9 → 0.2.10

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^4.0.0"
   },
-  "version": "0.2.9",
+  "version": "0.2.10",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

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),

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/files/file-upload-button.vue

@@ -27,6 +27,7 @@ const {
   leftSectionProps: { type: Object, 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 },
   capture: { type: null, required: false },

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

@@ -30,6 +30,7 @@ const props = defineProps({
   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 }
 });

package/dist/runtime/components/table/ui/table-sortable-header.vue

@@ -23,6 +23,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 },
   column: { type: Object, required: true },

package/dist/runtime/composables/use-style-resolver.d.ts

@@ -1,6 +1,5 @@
-import type { NuanceTheme } from '@nui/types';
-import type { CSSProperties } from 'vue';
+import type { NuanceTheme, TransformVars } from '@nui/types';
 /**
  * Builds a style object from a factory that receives the current theme.
  */
-export declare function useStyleResolver<T extends CSSProperties>(factory: (theme: NuanceTheme) => T): T;
+export declare function useStyleResolver<T extends object>(factory: (theme: NuanceTheme) => TransformVars<T>): TransformVars<T>;

package/dist/runtime/types/index.d.ts

@@ -1,3 +1,4 @@
+export type * from './styling';
 export type * from './theme';
 /** Map of component part names to user-provided class names. */
 export type Classes<Key extends string, Value = string | string[]> = Partial<Record<Key, Value>>;

package/dist/runtime/types/styling.d.ts

@@ -0,0 +1,4 @@
+export type CssVariable = `--${string}`;
+export type TransformVars<V> = {
+    [Key in keyof V]: V[Key] extends CssVariable ? Record<V[Key], string | undefined> : never;
+};

package/dist/runtime/utils/color/parse-theme-color.d.ts

@@ -1,4 +1,4 @@
-import type { NuanceColorShade, NuanceTheme } from '@nui/types';
+import type { CssVariable, NuanceColorShade, NuanceTheme } from '@nui/types';
 interface ParseThemeColorResult {
     /** Color name without its shade suffix. */
     color: string;
@@ -7,7 +7,7 @@ interface ParseThemeColorResult {
     /** Parsed shade index, or `undefined` when the color has no shade. */
     shade: NuanceColorShade | undefined;
     /** Matching CSS custom property, or `undefined` for non-theme colors. */
-    variable: `--${string}` | undefined;
+    variable: CssVariable | undefined;
     /** `true` when the color belongs to the Nuance theme palette. */
     isThemeColor: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nuance-ui",
-	"version": "0.2.9",
+	"version": "0.2.10",
 	"description": "A modern Vue UI library inspired by the best of the React ecosystem.",
 	"repository": {
 		"type": "git",