nuance-ui 0.2.6 → 0.2.8

package/dist/runtime/components/switch/switch.vue

@@ -0,0 +1,328 @@
+<script setup>
+import { useStyleResolver } from "@nui/composables";
+import { getRadius, getSize, getThemeColor } from "@nui/utils";
+import { computed, useId } from "vue";
+import Box from "../box.vue";
+import InputInline from "../input/ui/input-inline.vue";
+import { useSwitchGroupState } from "./lib/group.context";
+const {
+  id,
+  radius,
+  size: _size,
+  color,
+  name,
+  value,
+  error,
+  labelPosition,
+  onLabel,
+  offLabel,
+  withIndicator,
+  disabled: _disabled,
+  description,
+  icon,
+  label,
+  mod
+} = defineProps({
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  value: { type: String, required: false },
+  offLabel: { type: String, required: false },
+  onLabel: { type: String, required: false },
+  color: { type: null, required: false },
+  size: { type: String, required: false },
+  radius: { type: [String, Number], required: false },
+  icon: { type: String, required: false },
+  withIndicator: { type: Boolean, required: false },
+  label: { type: String, required: false },
+  description: { type: String, required: false },
+  error: { type: String, required: false },
+  disabled: { type: Boolean, required: false, skipCheck: true },
+  labelPosition: { type: String, required: false },
+  bodyElement: { type: null, required: false },
+  labelElement: { type: null, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+const uuid = computed(() => id ?? useId());
+const ctx = useSwitchGroupState();
+const size = computed(() => _size ?? ctx?.size);
+const modelValue = defineModel({ type: Boolean, ...{ default: false } });
+const checked = computed({
+  get: () => {
+    if (ctx && value !== void 0)
+      return ctx.isSelected(value);
+    return modelValue.value;
+  },
+  set: (check) => {
+    if (ctx && value !== void 0)
+      return ctx.update(value);
+    modelValue.value = check;
+  }
+});
+const disabled = computed(() => {
+  if (_disabled)
+    return true;
+  if (ctx && value !== void 0)
+    return ctx.isDisabled(value);
+  return false;
+});
+const style = computed(() => useStyleResolver((theme) => ({
+  "--switch-radius": radius === void 0 ? void 0 : getRadius(radius),
+  "--switch-height": getSize(size.value, "switch-height"),
+  "--switch-width": getSize(size.value, "switch-width"),
+  "--switch-thumb-size": getSize(size.value, "switch-thumb-size"),
+  "--switch-label-font-size": getSize(size.value, "switch-label-font-size"),
+  "--switch-track-label-padding": getSize(size.value, "switch-track-label-padding"),
+  "--switch-color": color ? getThemeColor(color, theme) : void 0
+})));
+</script>
+
+<template>
+	<InputInline
+		:id='uuid'
+		:style
+		:class='$style.root'
+		body-element='label'
+		label-element='span'
+		:label
+		:label-position
+		:description
+		:disabled
+		:error
+		:size
+		:mod
+	>
+		<input
+			:id='uuid'
+			v-model='checked'
+			:disabled
+			:name
+			:value
+			type='checkbox'
+			role='switch'
+			:class='$style.input'
+		>
+
+		<Box
+			is='span'
+			aria-hidden='true'
+			:mod='{ error, "label-position": labelPosition, "without-labels": !onLabel && !offLabel }'
+			:class='$style.track'
+		>
+			<Box
+				is='span'
+				:mod='{ "reduce-motion": true, "with-indicator": withIndicator && !icon }'
+				:class='$style.thumb'
+			>
+				<Icon v-if='icon' :name='icon' />
+			</Box>
+			<span :class='$style.trackLabel'>{{ checked ? onLabel : offLabel }}</span>
+		</Box>
+
+		<template v-if='!!$slots.label' #label>
+			<slot name='label' />
+		</template>
+		<template v-if='!!$slots.error' #error>
+			<slot name='error' />
+		</template>
+		<template v-if='!!$slots.description' #description>
+			<slot name='description' />
+		</template>
+	</InputInline>
+</template>
+
+<style lang="postcss" module>
+.root {
+	--switch-height-xs: rem(16px);
+	--switch-height-sm: rem(20px);
+	--switch-height-md: rem(24px);
+	--switch-height-lg: rem(30px);
+	--switch-height-xl: rem(36px);
+
+	--switch-width-xs: rem(32px);
+	--switch-width-sm: rem(38px);
+	--switch-width-md: rem(46px);
+	--switch-width-lg: rem(56px);
+	--switch-width-xl: rem(72px);
+
+	--switch-thumb-size-xs: rem(12px);
+	--switch-thumb-size-sm: rem(14px);
+	--switch-thumb-size-md: rem(18px);
+	--switch-thumb-size-lg: rem(22px);
+	--switch-thumb-size-xl: rem(28px);
+
+	--switch-label-font-size-xs: rem(7px);
+	--switch-label-font-size-sm: rem(9px);
+	--switch-label-font-size-md: rem(10px);
+	--switch-label-font-size-lg: rem(12px);
+	--switch-label-font-size-xl: rem(16px);
+
+	--switch-track-label-padding-xs: rem(3px);
+	--switch-track-label-padding-sm: rem(3px);
+	--switch-track-label-padding-md: rem(3.5px);
+	--switch-track-label-padding-lg: rem(3.5px);
+	--switch-track-label-padding-xl: rem(4px);
+
+	--switch-height: var(--switch-height-sm);
+	--switch-width: var(--switch-width-sm);
+	--switch-thumb-size: var(--switch-thumb-size-sm);
+	--switch-label-font-size: var(--switch-label-font-size-sm);
+	--switch-track-label-padding: var(--switch-track-label-padding-sm);
+	--switch-radius: 1000px;
+	--switch-color: var(--color-primary-filled);
+	--switch-disabled-color: var(--color-disabled);
+
+	position: relative;
+}
+
+.input {
+	position: absolute;
+
+	overflow: hidden;
+
+	width: 100%;
+	/* Hide the input visually without removing it from the accessibility tree or obscuring it in the DOM */
+	height: 100%;
+
+	margin: 0;
+	padding: 0;
+
+	white-space: nowrap;
+
+	opacity: 0;
+}
+
+.track {
+	cursor: var(--switch-cursor, pointer);
+	user-select: none;
+
+	position: relative;
+	z-index: 0;
+
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+	order: var(--switch-order, 1);
+
+	min-width: var(--switch-width);
+	height: var(--switch-height);
+	margin: 0;
+	border-radius: var(--switch-radius);
+
+	font-size: var(--switch-label-font-size);
+	font-weight: var(--font-weight-medium);
+	line-height: 0;
+	color: var(--switch-text-color);
+
+	appearance: none;
+	background-color: var(--switch-bg);
+
+	transition:
+		background-color 150ms ease,
+		border-color 150ms ease;
+	-webkit-tap-highlight-color: transparent;
+
+	&:where([data-without-labels]) {
+		width: var(--switch-width);
+	}
+
+	.input:focus-visible+& {
+		outline: 2px solid var(--color-primary-filled);
+		outline-offset: 2px;
+	}
+
+	.input:checked+& {
+		--switch-bg: var(--switch-color);
+		--switch-text-color: var(--color-white);
+	}
+
+	.input:disabled+&,
+	.input[data-disabled]+& {
+		--switch-bg: var(--switch-disabled-color);
+		--switch-cursor: not-allowed;
+	}
+
+	&[data-label-position='left'] {
+		--switch-order: 2;
+	}
+
+	@mixin where-light {
+		--switch-bg: var(--color-gray-3);
+		--switch-text-color: var(--color-gray-6);
+	}
+
+	@mixin where-dark {
+		--switch-bg: var(--color-dark-5);
+		--switch-text-color: var(--color-dark-1);
+	}
+}
+
+.thumb {
+	position: absolute;
+	z-index: 1;
+	inset-inline-start: var(--switch-thumb-start, var(--switch-track-label-padding));
+
+	display: flex;
+
+	width: var(--switch-thumb-size);
+	height: var(--switch-thumb-size);
+	border-radius: var(--switch-radius);
+
+	background-color: var(--switch-thumb-bg, var(--color-white));
+
+	transition: inset-inline-start 150ms ease;
+
+	&:where([data-with-indicator])::before {
+		content: '';
+
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+
+		width: 40%;
+		height: 40%;
+		border-radius: var(--switch-radius);
+
+		background-color: var(--switch-bg);
+	}
+
+	&>* {
+		margin: auto;
+	}
+
+	.input:checked+*>& {
+		--switch-thumb-start: calc(100% - var(--switch-thumb-size) - var(--switch-track-label-padding));
+	}
+
+	.input:disabled+*>&,
+	.input[data-disabled]+*>& {
+		--switch-thumb-bg: var(--switch-thumb-bg-disabled);
+	}
+
+	@mixin where-light {
+		--switch-thumb-bg-disabled: var(--color-gray-0);
+	}
+
+	@mixin where-dark {
+		--switch-thumb-bg-disabled: var(--color-dark-3);
+	}
+}
+
+.trackLabel {
+	display: grid;
+	place-content: center;
+
+	min-width: calc(var(--switch-width) - var(--switch-thumb-size));
+	height: 100%;
+	margin-inline-start: calc(var(--switch-thumb-size) + var(--switch-track-label-padding));
+	padding-inline: var(--switch-track-label-padding);
+
+	transition: margin 150ms ease;
+
+	.input:checked+*>& {
+		margin-inline-start: 0;
+		margin-inline-end: calc(var(--switch-thumb-size) + var(--switch-track-label-padding));
+	}
+}
+</style>

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

@@ -0,0 +1,50 @@
+import type { NuanceColor, NuanceRadius, NuanceSize } from '@nui/types';
+import type { InlineInputProps } from '../input/ui/input-inline.vue.js';
+export interface SwitchProps extends Omit<InlineInputProps, 'id'> {
+    /** Id used to bind input and label, auto-generated if not provided */
+    id?: string;
+    /** Input name */
+    name?: string;
+    /** Value used when inside `SwitchGroup` */
+    value?: string;
+    /** Inner label shown in unchecked state */
+    offLabel?: string;
+    /** Inner label shown in checked state */
+    onLabel?: string;
+    /** Color from theme */
+    color?: NuanceColor;
+    /** Component size */
+    size?: NuanceSize;
+    /** Border radius */
+    radius?: NuanceRadius;
+    /** Icon inside the thumb */
+    icon?: string;
+    /** Displays a colored dot inside the thumb matching the track background */
+    withIndicator?: boolean;
+}
+type __VLS_Props = SwitchProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_26: {}, __VLS_29: {}, __VLS_32: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_26) => any;
+} & {
+    error?: (props: typeof __VLS_29) => any;
+} & {
+    description?: (props: typeof __VLS_32) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/table/index.d.ts

@@ -1,4 +1,4 @@
-export * from './model.js';
+export * from './types.js';
 export type * from './ui/table-sort-icon.vue';
 export type * from './ui/table-sortable-header.vue';
 export type * from './ui/table.vue';

package/dist/runtime/components/table/index.js

@@ -1 +1 @@
-export * from "./model.js";
+export * from "./types.js";

package/dist/runtime/components/table/lib.d.ts

@@ -1,6 +1,6 @@
 import type { Updater } from '@tanstack/vue-table';
 import type { Ref } from 'vue';
-import type { TableColumn, TableData, TableProps, TableRow } from './model.js';
+import type { TableColumn, TableData, TableProps, TableRow } from './types.js';
 export declare function processColumns<T extends TableData>(columns: TableColumn<T>[]): TableColumn<T>[];
 export declare function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref): void;
 export declare function resolveValue<T, A = undefined>(prop: T | ((arg: A) => T), arg?: A): T | undefined;

package/dist/runtime/components/table/{model.d.ts → types.d.ts}

@@ -1,8 +1,8 @@
+import type { Classes, NuanceColor } from '@nui/types';
 import type { RowData, TableMeta } from '@tanstack/table-core';
 import type { CellContext, ColumnDef, ColumnFiltersOptions, ColumnPinningOptions, ColumnSizingOptions, CoreOptions, ExpandedOptions, FacetedOptions, GlobalFilterOptions, GroupingOptions, HeaderContext, PaginationOptions, Row, RowPinningOptions, RowSelectionOptions, SortingOptions, VisibilityOptions } from '@tanstack/vue-table';
 import type { VirtualizerOptions } from '@tanstack/vue-virtual';
 import type { CSSProperties, TableHTMLAttributes, WatchOptions } from 'vue';
-import type { NuanceColor } from '../../types/index.js';
 export type TableRow<T> = Row<T>;
 export type TableData = RowData;
 export type TableColumn<T extends TableData, D = any> = ColumnDef<T, D>;
@@ -25,9 +25,13 @@ export type TableSlots<T extends TableData = TableData> = {
     'body-bottom': (props?: object) => any;
 } & DynamicHeaderSlots<T> & DynamicFooterSlots<T> & DynamicCellSlots<T>;
 export interface TableProps<T extends TableData = TableData> extends TableOptions<T>, /** @vue-ignore */ Omit<TableHTMLAttributes, 'columns' | 'onSelect' | 'onContextmenu'> {
+    /** Row data */
     data?: T[];
+    /** Column definitions */
     columns?: TableColumn<T>[];
+    /** Table caption text */
     caption?: string;
+    /** Table metadata passed to column defs and cell renderers */
     meta?: TableMeta<T>;
     /**
      * Enable virtualization for large datasets.
@@ -57,30 +61,23 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
      * @defaultValue false
      */
     sticky?: boolean | 'header' | 'footer';
-    /** Whether the table should be in loading state. */
+    /** Loading state */
     loading?: boolean;
     /**
+     * Color of the loading overlay
      * @defaultValue 'primary'
      */
     loadingColor?: NuanceColor | string;
+    /** Vertical alignment of cell content */
     verticalAlign?: CSSProperties['verticalAlign'];
+    /** Called when a row is clicked */
     onSelect?: (e: Event, row: TableRow<T>) => void;
+    /** Called when a row is hovered or hover ends */
     onHover?: (e: Event, row: TableRow<T> | null) => void;
+    /** Called on right-click on a row */
     onContextmenu?: ((e: Event, row: TableRow<T>) => void) | Array<((e: Event, row: TableRow<T>) => void)>;
-    classes?: {
-        root?: string;
-        table?: string;
-        thead?: string;
-        th?: string;
-        td?: string;
-        tr?: string;
-        tbody?: string;
-        tfoot?: string;
-        caption?: string;
-        loading?: string;
-        empty?: string;
-        separator?: string;
-    };
+    /** Styles API */
+    classes?: Classes<'root' | 'table' | 'thead' | 'th' | 'td' | 'tr' | 'tbody' | 'tfoot' | 'caption' | 'loading' | 'empty' | 'separator'>;
     /**
      * Use the `watchOptions` prop to customize reactivity (for ex: disable deep watching for changes in your data or limiting the max traversal depth). This can improve performance by reducing unnecessary re-renders, but it should be used with caution as it may lead to unexpected behavior if not managed properly.
      * @see [API](https://vuejs.org/api/options-state.html#watch)

package/dist/runtime/components/table/ui/table-sort-icon.d.vue.ts

@@ -1,5 +1,5 @@
 import type { Column, SortDirection } from '@tanstack/vue-table';
-import type { TableData } from '../model.js';
+import type { TableData } from '../types.js';
 export interface TableSortIconProps<TData extends TableData> {
     column: Column<TData>;
     icons?: Record<SortDirection | 'off', string>;

package/dist/runtime/components/table/ui/table-sort-icon.vue

@@ -14,5 +14,5 @@ const name = computed(() => column.getIsSorted() ? column.getIsSorted() === "asc
 </script>
 
 <template>
-	<Icon :name />
+	<Icon :name />
 </template>

package/dist/runtime/components/table/ui/table-sort-icon.vue.d.ts

@@ -1,5 +1,5 @@
 import type { Column, SortDirection } from '@tanstack/vue-table';
-import type { TableData } from '../model.js';
+import type { TableData } from '../types.js';
 export interface TableSortIconProps<TData extends TableData> {
     column: Column<TData>;
     icons?: Record<SortDirection | 'off', string>;

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

@@ -1,5 +1,5 @@
 import type { ButtonProps } from '../../button/button.vue.js';
-import type { TableData } from '../model.js';
+import type { TableData } from '../types.js';
 import type { TableSortIconProps } from './table-sort-icon.vue.js';
 export interface TableSortableHeaderProps<TData extends TableData> extends ButtonProps, TableSortIconProps<TData> {
 }

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

@@ -20,6 +20,7 @@ const {
   classes: { type: Object, required: false },
   leftSectionPE: { type: null, required: false },
   leftSectionProps: { type: Object, required: false },
+  icon: { type: String, required: false },
   rightSectionPE: { type: null, required: false },
   rightSectionProps: { type: Object, required: false },
   is: { type: null, required: false },

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

@@ -1,5 +1,5 @@
 import type { ButtonProps } from '../../button/button.vue.js';
-import type { TableData } from '../model.js';
+import type { TableData } from '../types.js';
 import type { TableSortIconProps } from './table-sort-icon.vue.js';
 export interface TableSortableHeaderProps<TData extends TableData> extends ButtonProps, TableSortIconProps<TData> {
 }

package/dist/runtime/components/table/ui/table.d.vue.ts

@@ -1,5 +1,5 @@
 import type { ColumnFiltersState, ColumnOrderState, ColumnPinningState, ColumnSizingInfoState, ColumnSizingState, ExpandedState, GroupingState, PaginationState, RowPinningState, RowSelectionState, SortingState, VisibilityState } from '@tanstack/vue-table';
-import type { TableData, TableProps, TableSlots } from '../model.js';
+import type { TableData, TableProps, TableSlots } from '../types.js';
 declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(TableProps<T> & {
         globalFilter?: string;