@neobrut-vue/core 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.5.0
+
+- Added `NbStepper`, `NbMeter`, `NbTimeline`, and `NbCopyButton` with accessible examples.
+- Added clipboard success and failure feedback, with coverage for text changes during copying.
+
+## 0.4.0
+
+- Added `NbTagsInput`, `NbPinInput`, `NbRating`, and `NbCollapsible`.
+- Added accessible demos and usage examples for the new components.
+
 ## 0.3.0
 
 - Added `NbSheet`, `NbAlertDialog`, `NbContextMenu`, `NbCommand`, `NbHoverCard`, and `NbNavigationMenu`.

package/README.md

@@ -49,11 +49,11 @@ import { NbBadge, NbButton, NbCard } from '@neobrut-vue/core'
 
 | Group | Components |
 | --- | --- |
-| Actions and surfaces | `NbButton`, `NbButtonGroup`, `NbToggle`, `NbCard`, `NbAlert`, `NbBadge` |
-| Forms | `NbCheckbox`, `NbCombobox`, `NbFieldset`, `NbInput`, `NbInputGroup`, `NbNumberInput`, `NbRadioGroup`, `NbSelect`, `NbSelectItem`, `NbSlider`, `NbSwitch`, `NbTextarea`, `NbToggleGroup`, `NbToggleGroupItem` |
-| Navigation | `NbBreadcrumbs`, `NbNavigationMenu`, `NbPagination`, `NbTabs`, `NbTabsList`, `NbTabsTrigger`, `NbTabsContent` |
+| Actions and surfaces | `NbButton`, `NbButtonGroup`, `NbCopyButton`, `NbToggle`, `NbCard`, `NbAlert`, `NbBadge` |
+| Forms | `NbCheckbox`, `NbCombobox`, `NbFieldset`, `NbInput`, `NbInputGroup`, `NbNumberInput`, `NbPinInput`, `NbRadioGroup`, `NbRating`, `NbSelect`, `NbSelectItem`, `NbSlider`, `NbSwitch`, `NbTagsInput`, `NbTextarea`, `NbToggleGroup`, `NbToggleGroupItem` |
+| Navigation | `NbBreadcrumbs`, `NbNavigationMenu`, `NbPagination`, `NbStepper`, `NbStepperItem`, `NbTabs`, `NbTabsList`, `NbTabsTrigger`, `NbTabsContent` |
 | Overlays | `NbAlertDialog`, `NbCommand`, `NbContextMenu`, `NbDialog`, `NbDropdownMenu`, `NbHoverCard`, `NbPopover`, `NbSheet`, `NbToast`, `NbTooltip` |
-| Data display | `NbAccordion`, `NbAccordionItem`, `NbAvatar`, `NbEmptyState`, `NbProgress`, `NbSkeleton`, `NbSpinner`, `NbTable` |
+| Data display | `NbAccordion`, `NbAccordionItem`, `NbAvatar`, `NbCollapsible`, `NbEmptyState`, `NbMeter`, `NbProgress`, `NbSkeleton`, `NbSpinner`, `NbTable`, `NbTimeline`, `NbTimelineItem` |
 | Inline and layout | `NbLink`, `NbKbd`, `NbMarker`, `NbAspectRatio`, `NbScrollArea`, `NbSeparator` |
 
 ## Links and actions
@@ -84,6 +84,18 @@ const pinned = ref(false)
 </template>
 ```
 
+`NbCopyButton` copies its `text` with the browser Clipboard API. It announces short success or failure feedback and emits `copied` or `error`; clipboard access requires a secure context such as HTTPS or localhost.
+
+```vue
+<script setup lang="ts">
+import { NbCopyButton } from '@neobrut-vue/core'
+</script>
+
+<template>
+  <NbCopyButton text="npm install @neobrut-vue/core" label="Copy install command" />
+</template>
+```
+
 ## Forms
 
 Form components use `v-model`, forward native input attributes, and expose labels, hints, and errors through the relevant ARIA relationships.
@@ -179,6 +191,26 @@ const handle = ref('')
 </template>
 ```
 
+Tags, verification codes, and ratings use the same `v-model` pattern. A PIN value is an array of digits so leading zeroes survive; `complete` fires when every cell is filled.
+Set `name` when submitting tags or codes in a native form so the submitted field has a predictable key.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NbPinInput, NbRating, NbTagsInput } from '@neobrut-vue/core'
+
+const tags = ref(['Vue'])
+const code = ref<number[]>([])
+const rating = ref(3)
+</script>
+
+<template>
+  <NbTagsInput v-model="tags" label="Skills" placeholder="Add a skill" name="skills" />
+  <NbPinInput v-model="code" label="Verification code" :length="6" otp name="code" />
+  <NbRating v-model="rating" label="Experience" name="rating" />
+</template>
+```
+
 ## Navigation and disclosure
 
 Tabs support controlled and uncontrolled state plus horizontal or vertical keyboard navigation:
@@ -222,6 +254,18 @@ import { NbAccordion, NbAccordionItem } from '@neobrut-vue/core'
 </template>
 ```
 
+For one revealable section, use `NbCollapsible` with `default-open` or `v-model:open`:
+
+```vue
+<script setup lang="ts">
+import { NbCollapsible } from '@neobrut-vue/core'
+</script>
+
+<template>
+  <NbCollapsible title="Advanced options">Extra controls go here.</NbCollapsible>
+</template>
+```
+
 ## Dialogs and menus
 
 `NbDialog` traps focus, closes on Escape, and restores focus to its trigger:
@@ -324,6 +368,31 @@ const page = ref(1)
 </template>
 ```
 
+Use `NbProgress` for completion, and the native `NbMeter` for a bounded measurement. `NbStepper` handles keyboard navigation and controlled or uncontrolled steps; render the active panel in your app. `NbTimeline` keeps event history in a semantic ordered list.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NbMeter, NbStepper, NbStepperItem, NbTimeline, NbTimelineItem } from '@neobrut-vue/core'
+
+const step = ref(1)
+</script>
+
+<template>
+  <NbStepper v-model="step" label="Checkout">
+    <NbStepperItem :step="1" title="Cart" description="Review items" />
+    <NbStepperItem :step="2" title="Address" />
+    <NbStepperItem :step="3" title="Payment" />
+  </NbStepper>
+  <section v-if="step === 1">Review your cart here.</section>
+
+  <NbMeter label="Storage used" :value="72" show-value />
+  <NbTimeline label="Release history">
+    <NbTimelineItem title="Published" date="Oct 1" datetime="2026-10-01">Available on npm.</NbTimelineItem>
+  </NbTimeline>
+</template>
+```
+
 ## VeeValidate
 
 VeeValidate is optional. Standard model and attribute bindings work without an adapter:

package/dist/components/NbCollapsible/NbCollapsible.vue.d.ts

@@ -0,0 +1,31 @@
+type __VLS_Props = {
+    title: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    disabled?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    open: boolean;
+    defaultOpen: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/NbCollapsible/index.d.ts

@@ -0,0 +1 @@
+export { default as NbCollapsible } from './NbCollapsible.vue';

package/dist/components/NbCopyButton/NbCopyButton.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    text: string;
+    label?: string;
+    copiedLabel?: string;
+    errorLabel?: string;
+    disabled?: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    copied: (text: string) => any;
+    error: (error: unknown) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCopied?: ((text: string) => any) | undefined;
+    onError?: ((error: unknown) => any) | undefined;
+}>, {
+    disabled: boolean;
+    label: string;
+    copiedLabel: string;
+    errorLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/NbCopyButton/index.d.ts

@@ -0,0 +1 @@
+export { default as NbCopyButton } from './NbCopyButton.vue';

package/dist/components/NbMeter/NbMeter.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    value: number;
+    min?: number;
+    max?: number;
+    label: string;
+    showValue?: boolean;
+    low?: number;
+    high?: number;
+    optimum?: number;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    min: number;
+    max: number;
+    showValue: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/NbMeter/index.d.ts

@@ -0,0 +1 @@
+export { default as NbMeter } from './NbMeter.vue';

package/dist/components/NbPinInput/NbPinInput.vue.d.ts

@@ -0,0 +1,28 @@
+type __VLS_Props = {
+    modelValue?: number[];
+    length?: number;
+    label?: string;
+    hint?: string;
+    error?: string;
+    name?: string;
+    id?: string;
+    disabled?: boolean;
+    required?: boolean;
+    mask?: boolean;
+    otp?: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number[]) => any;
+    complete: (value: number[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number[]) => any) | undefined;
+    onComplete?: ((value: number[]) => any) | undefined;
+}>, {
+    modelValue: number[];
+    disabled: boolean;
+    length: number;
+    required: boolean;
+    mask: boolean;
+    otp: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/NbPinInput/index.d.ts

@@ -0,0 +1 @@
+export { default as NbPinInput } from './NbPinInput.vue';

package/dist/components/NbRating/NbRating.vue.d.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    modelValue?: number;
+    length?: number;
+    label?: string;
+    hint?: string;
+    error?: string;
+    name?: string;
+    id?: string;
+    disabled?: boolean;
+    required?: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    disabled: boolean;
+    length: number;
+    required: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/NbRating/index.d.ts

@@ -0,0 +1 @@
+export { default as NbRating } from './NbRating.vue';

package/dist/components/NbStepper/NbStepper.vue.d.ts

@@ -0,0 +1,33 @@
+type __VLS_Props = {
+    modelValue?: number;
+    defaultValue?: number;
+    label?: string;
+    orientation?: 'horizontal' | 'vertical';
+    linear?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    defaultValue: number;
+    orientation: "horizontal" | "vertical";
+    label: string;
+    linear: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/NbStepper/NbStepperItem.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    step: number;
+    title: string;
+    description?: string;
+    disabled?: boolean;
+    completed?: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/NbStepper/index.d.ts

@@ -0,0 +1,2 @@
+export { default as NbStepper } from './NbStepper.vue';
+export { default as NbStepperItem } from './NbStepperItem.vue';

package/dist/components/NbTagsInput/NbTagsInput.vue.d.ts

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    modelValue?: string[];
+    label?: string;
+    hint?: string;
+    error?: string;
+    placeholder?: string;
+    name?: string;
+    id?: string;
+    max?: number;
+    disabled?: boolean;
+    required?: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {
+    modelValue: string[];
+    disabled: boolean;
+    required: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/NbTagsInput/index.d.ts

@@ -0,0 +1 @@
+export { default as NbTagsInput } from './NbTagsInput.vue';

package/dist/components/NbTimeline/NbTimeline.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    label?: string;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLOListElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLOListElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/NbTimeline/NbTimelineItem.vue.d.ts

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    title: string;
+    date?: string;
+    datetime?: string;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLLIElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLIElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/NbTimeline/index.d.ts

@@ -0,0 +1,2 @@
+export { default as NbTimeline } from './NbTimeline.vue';
+export { default as NbTimelineItem } from './NbTimelineItem.vue';

package/dist/index.d.ts

@@ -7,6 +7,8 @@ import { NbButton } from './components/NbButton';
 import { NbButtonGroup } from './components/NbButtonGroup';
 import { NbCard } from './components/NbCard';
 import { NbCheckbox } from './components/NbCheckbox';
+import { NbCollapsible } from './components/NbCollapsible';
+import { NbCopyButton } from './components/NbCopyButton';
 import { NbCombobox } from './components/NbCombobox';
 import { NbCommand } from './components/NbCommand';
 import { NbContextMenu, NbContextMenuCheckboxItem, NbContextMenuItem, NbContextMenuLabel, NbContextMenuRadioGroup, NbContextMenuRadioItem, NbContextMenuSeparator, NbContextMenuShortcut, NbContextMenuSub } from './components/NbContextMenu';
@@ -22,12 +24,15 @@ import { NbHoverCard } from './components/NbHoverCard';
 import { NbKbd } from './components/NbKbd';
 import { NbLink } from './components/NbLink';
 import { NbMarker } from './components/NbMarker';
+import { NbMeter } from './components/NbMeter';
 import { NbNavigationMenu } from './components/NbNavigationMenu';
 import { NbNumberInput } from './components/NbNumberInput';
 import { NbPagination } from './components/NbPagination';
+import { NbPinInput } from './components/NbPinInput';
 import { NbPopover } from './components/NbPopover';
 import { NbProgress } from './components/NbProgress';
 import { NbRadioGroup } from './components/NbRadioGroup';
+import { NbRating } from './components/NbRating';
 import { NbScrollArea } from './components/NbScrollArea';
 import { NbSheet } from './components/NbSheet';
 import { NbSelect, NbSelectItem } from './components/NbSelect';
@@ -35,15 +40,18 @@ import { NbSeparator } from './components/NbSeparator';
 import { NbSlider } from './components/NbSlider';
 import { NbSkeleton } from './components/NbSkeleton';
 import { NbSpinner } from './components/NbSpinner';
+import { NbStepper, NbStepperItem } from './components/NbStepper';
 import { NbSwitch } from './components/NbSwitch';
+import { NbTagsInput } from './components/NbTagsInput';
 import { NbTabs, NbTabsContent, NbTabsList, NbTabsTrigger } from './components/NbTabs';
 import { NbTextarea } from './components/NbTextarea';
 import { NbTable } from './components/NbTable';
 import { NbToast } from './components/NbToast';
+import { NbTimeline, NbTimelineItem } from './components/NbTimeline';
 import { NbToggle } from './components/NbToggle';
 import { NbToggleGroup, NbToggleGroupItem } from './components/NbToggleGroup';
 import { NbTooltip } from './components/NbTooltip';
-export { NbAccordion, NbAccordionItem, NbAlert, NbAlertDialog, NbAspectRatio, NbAvatar, NbBadge, NbBreadcrumbs, NbButton, NbButtonGroup, NbCard, NbCheckbox, NbCombobox, NbCommand, NbContextMenu, NbContextMenuCheckboxItem, NbContextMenuItem, NbContextMenuLabel, NbContextMenuRadioGroup, NbContextMenuRadioItem, NbContextMenuSeparator, NbContextMenuShortcut, NbContextMenuSub, NbDialog, NbDropdownMenu, NbDropdownMenuItem, NbDropdownMenuSeparator, NbEmptyState, NbFieldset, NbHoverCard, NbInput, NbInputGroup, NbKbd, NbLink, NbMarker, NbNavigationMenu, NbNumberInput, NbPagination, NbPopover, NbProgress, NbRadioGroup, NbScrollArea, NbSelect, NbSelectItem, NbSeparator, NbSheet, NbSkeleton, NbSlider, NbSpinner, NbSwitch, NbTable, NbTabs, NbTabsContent, NbTabsList, NbTabsTrigger, NbTextarea, NbToast, NbToggle, NbToggleGroup, NbToggleGroupItem, NbTooltip };
+export { NbAccordion, NbAccordionItem, NbAlert, NbAlertDialog, NbAspectRatio, NbAvatar, NbBadge, NbBreadcrumbs, NbButton, NbButtonGroup, NbCard, NbCheckbox, NbCollapsible, NbCombobox, NbCommand, NbContextMenu, NbContextMenuCheckboxItem, NbContextMenuItem, NbContextMenuLabel, NbContextMenuRadioGroup, NbContextMenuRadioItem, NbContextMenuSeparator, NbContextMenuShortcut, NbContextMenuSub, NbCopyButton, NbDialog, NbDropdownMenu, NbDropdownMenuItem, NbDropdownMenuSeparator, NbEmptyState, NbFieldset, NbHoverCard, NbInput, NbInputGroup, NbKbd, NbLink, NbMarker, NbMeter, NbNavigationMenu, NbNumberInput, NbPagination, NbPinInput, NbPopover, NbProgress, NbRadioGroup, NbRating, NbScrollArea, NbSelect, NbSelectItem, NbSeparator, NbSheet, NbSkeleton, NbSlider, NbSpinner, NbStepper, NbStepperItem, NbSwitch, NbTable, NbTabs, NbTabsContent, NbTabsList, NbTabsTrigger, NbTagsInput, NbTextarea, NbTimeline, NbTimelineItem, NbToast, NbToggle, NbToggleGroup, NbToggleGroupItem, NbTooltip };
 export type { NbBreadcrumbItem } from './components/NbBreadcrumbs';
 export type { NbComboboxOption } from './components/NbCombobox';
 export type { NbCommandOption } from './components/NbCommand';