@streamscloud/kit 0.10.1 → 0.10.3

package/dist/ui/page-toolbar/cmp.toolbar-value-stepper.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">import { Icon } from '../icon';
+import { ToolbarValueStepperLocalization } from './toolbar-value-stepper-localization';
+import IconChevronLeft from '@fluentui/svg-icons/icons/chevron_left_16_regular.svg?raw';
+import IconChevronRight from '@fluentui/svg-icons/icons/chevron_right_16_regular.svg?raw';
+const { value, min = 0, max = 100, step = 1, valueSuffix = '', size = 'sm', on } = $props();
+const localization = new ToolbarValueStepperLocalization();
+const atMin = $derived(value <= min);
+const atMax = $derived(value >= max);
+const decrease = () => {
+    on?.change?.(Math.max(min, value - step));
+};
+const increase = () => {
+    on?.change?.(Math.min(max, value + step));
+};
+</script>
+
+<div class="toolbar-value-stepper toolbar-value-stepper--{size}" role="group" aria-label={localization.value}>
+  <button type="button" class="toolbar-value-stepper__btn" onclick={decrease} disabled={atMin} aria-label={localization.decreaseValue}>
+    <Icon src={IconChevronLeft} />
+  </button>
+  <span class="toolbar-value-stepper__value">{value}{valueSuffix}</span>
+  <button type="button" class="toolbar-value-stepper__btn" onclick={increase} disabled={atMax} aria-label={localization.increaseValue}>
+    <Icon src={IconChevronRight} />
+  </button>
+</div>
+
+<!--
+@component
+A compact `[<] value [>]` stepper for toolbars — increment / decrement a numeric value between `min`
+and `max` by `step`, with an optional `valueSuffix` (e.g. ` %`). Bound arrows disable at the limits.
+Shares the field-height preset so it lines up with other toolbar controls.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--toolbar-value-stepper--value--min-inline-size` | Min width of the value readout (keeps arrows from shifting) | `2.25rem` |
+| `--sc-kit--toolbar-value-stepper--icon--color` | Arrow icon color | `var(--sc-kit--color--accent)` |
+-->
+
+<style>.toolbar-value-stepper {
+  --_toolbar-value-stepper--value--min-inline-size: var(--sc-kit--toolbar-value-stepper--value--min-inline-size, 2.25rem);
+  --_toolbar-value-stepper--icon--color: var(--sc-kit--toolbar-value-stepper--icon--color, var(--sc-kit--color--accent));
+  --sc-kit--icon--color: var(--_toolbar-value-stepper--icon--color);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sc-kit--space--1);
+  block-size: var(--_toolbar-value-stepper--height);
+  padding-inline: var(--sc-kit--space--2);
+  border: 1px solid var(--sc-kit--color--border--field);
+  border-radius: var(--sc-kit--radius--md);
+  background: var(--sc-kit--color--bg--field);
+}
+.toolbar-value-stepper--sm {
+  --_toolbar-value-stepper--height: var(--sc-kit--field--height--sm);
+  --_toolbar-value-stepper--font-size: var(--sc-kit--font-size--sm);
+}
+.toolbar-value-stepper--md {
+  --_toolbar-value-stepper--height: var(--sc-kit--field--height--md);
+  --_toolbar-value-stepper--font-size: var(--sc-kit--font-size--md);
+}
+.toolbar-value-stepper--lg {
+  --_toolbar-value-stepper--height: var(--sc-kit--field--height--lg);
+  --_toolbar-value-stepper--font-size: var(--sc-kit--font-size--lg);
+}
+.toolbar-value-stepper__btn {
+  display: inline-flex;
+  align-items: center;
+  padding-inline: var(--sc-kit--space--1);
+  border: 0;
+  background: none;
+  cursor: pointer;
+  transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.toolbar-value-stepper__btn:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+.toolbar-value-stepper__value {
+  min-inline-size: var(--_toolbar-value-stepper--value--min-inline-size);
+  text-align: center;
+  font-size: var(--_toolbar-value-stepper--font-size);
+  color: var(--sc-kit--color--text--primary);
+  font-variant-numeric: tabular-nums;
+}</style>

package/dist/ui/page-toolbar/cmp.toolbar-value-stepper.svelte.d.ts

@@ -0,0 +1,30 @@
+type Props = {
+    value: number;
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    /** @default 1 */
+    step?: number;
+    /** Suffix appended to the displayed value (e.g. ' %'). @default '' */
+    valueSuffix?: string;
+    /** Size preset (shared with Input / DatePicker / Select). @default 'sm' */
+    size?: 'sm' | 'md' | 'lg';
+    on?: {
+        change?: (value: number) => void;
+    };
+};
+/**
+ * A compact `[<] value [>]` stepper for toolbars — increment / decrement a numeric value between `min`
+ * and `max` by `step`, with an optional `valueSuffix` (e.g. ` %`). Bound arrows disable at the limits.
+ * Shares the field-height preset so it lines up with other toolbar controls.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--toolbar-value-stepper--value--min-inline-size` | Min width of the value readout (keeps arrows from shifting) | `2.25rem` |
+ * | `--sc-kit--toolbar-value-stepper--icon--color` | Arrow icon color | `var(--sc-kit--color--accent)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/page-toolbar/index.d.ts

@@ -7,4 +7,5 @@ export { default as ToolbarSearchInput } from './cmp.toolbar-search-input.svelte
 export { default as ToolbarSegmentedControl } from './cmp.toolbar-segmented-control.svelte';
 export { default as ToolbarSwitchItem } from './cmp.toolbar-switch-item.svelte';
 export { default as ToolbarToggleItem } from './cmp.toolbar-toggle-item.svelte';
+export { default as ToolbarValueStepper } from './cmp.toolbar-value-stepper.svelte';
 export type { ReorderableToggleItem } from './types';

package/dist/ui/page-toolbar/index.js

@@ -7,3 +7,4 @@ export { default as ToolbarSearchInput } from './cmp.toolbar-search-input.svelte
 export { default as ToolbarSegmentedControl } from './cmp.toolbar-segmented-control.svelte';
 export { default as ToolbarSwitchItem } from './cmp.toolbar-switch-item.svelte';
 export { default as ToolbarToggleItem } from './cmp.toolbar-toggle-item.svelte';
+export { default as ToolbarValueStepper } from './cmp.toolbar-value-stepper.svelte';

package/dist/ui/page-toolbar/toolbar-value-stepper-localization.d.ts

@@ -0,0 +1,5 @@
+export declare class ToolbarValueStepperLocalization {
+    get value(): string;
+    get decreaseValue(): string;
+    get increaseValue(): string;
+}

package/dist/ui/page-toolbar/toolbar-value-stepper-localization.js

@@ -0,0 +1,26 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    value: {
+        en: 'Value',
+        no: 'Verdi'
+    },
+    decreaseValue: {
+        en: 'Decrease value',
+        no: 'Reduser verdi'
+    },
+    increaseValue: {
+        en: 'Increase value',
+        no: 'Øk verdi'
+    }
+};
+export class ToolbarValueStepperLocalization {
+    get value() {
+        return loc.value[AppLocale.current];
+    }
+    get decreaseValue() {
+        return loc.decreaseValue[AppLocale.current];
+    }
+    get increaseValue() {
+        return loc.increaseValue[AppLocale.current];
+    }
+}

package/dist/ui/table/cmp.table.svelte

@@ -150,7 +150,15 @@ const getEditorColumnOrDefault = (column, editMode) => {
         </tr>
       </thead>
       <tbody
-        use:dndzone={{ items: model.items, dragDisabled: !rowsDraggable, flipDurationMs, dropTargetStyle: {}, transformDraggedElement, type: 'table' }}
+        use:dndzone={{
+          items: model.items,
+          dragDisabled: !rowsDraggable,
+          dropFromOthersDisabled: true,
+          flipDurationMs,
+          dropTargetStyle: {},
+          transformDraggedElement,
+          type: 'table'
+        }}
         onconsider={handleConsider}
         onfinalize={handleFinalize}>
         {#if showPlaceholder || showNoItemsPlaceholder}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.10.1",
+  "version": "0.10.3",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",