@7pmlabs/design-system 2.0.8 → 2.1.0

package/dist/types/components/BInputTags/BInputTags.vue.d.ts

@@ -0,0 +1,54 @@
+import { BCommonSize } from '@/types.ts';
+type DelimiterToken = 'enter' | 'comma' | 'space';
+type DelimiterProp = DelimiterToken | RegExp | Array<DelimiterToken>;
+type __VLS_Props = {
+    /** Placeholder shown in the inner input when empty. */
+    placeholder?: string;
+    /** Visual size preset (sm | md | lg). @default 'md' */
+    size?: `${BCommonSize}`;
+    /** Disables the whole control (input and remove buttons). @default false */
+    disabled?: boolean;
+    /**
+     * Which key(s) commit the input as a tag. May be a single token, an array of
+     * tokens, or a `RegExp` matched against the input value to detect delimiters
+     * inside the value itself (used for paste / typed delimiters).
+     * Tokens: 'enter' | 'comma' | 'space'.
+     * @default ['enter', 'comma']
+     */
+    delimiter?: DelimiterProp;
+    /** Maximum number of tags. When reached the inner input becomes readonly. */
+    max?: number;
+    /**
+     * Optional validator. Return `true` to accept, `false` to reject silently,
+     * or a string to reject and emit it as the `invalid` reason.
+     */
+    validate?: (value: string) => boolean | string;
+    /** Whether duplicate tag values are accepted. @default false */
+    allowDuplicate?: boolean;
+    /** Optional explicit DOM id for the inner input. */
+    id?: string;
+    /** ARIA label for the inner input. @default 'Add tag' */
+    inputAriaLabel?: string;
+};
+declare function focus(): void;
+declare function clear(): void;
+type __VLS_ModelProps = {
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: typeof focus;
+    clear: typeof clear;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+    invalid: (value: string, reason: string) => any;
+    add: (value: string) => any;
+    remove: (value: string, index: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: string[]) => any;
+    onInvalid?: (value: string, reason: string) => any;
+    onAdd?: (value: string) => any;
+    onRemove?: (value: string, index: number) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/components/BInputTags/index.d.ts

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

package/dist/types/components/BLink/BLink.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/BLink/BLink.vue.d.ts

@@ -0,0 +1,100 @@
+import { BCommonColor } from '@/types.ts';
+import type { RouteLocationRaw } from 'vue-router';
+type __VLS_Props = {
+    /**
+     * URL for an anchor link. When set (and `to` is not), the component
+     * renders as an `<a href="...">`.
+     * @example 'https://example.com'
+     */
+    href?: string;
+    /**
+     * Vue Router target. When set, the component renders as `<RouterLink>`
+     * (gracefully falls back to `<a>` if vue-router is not registered).
+     */
+    to?: RouteLocationRaw;
+    /**
+     * Anchor `target` attribute. Forced to `_blank` when `external` is true.
+     * @example '_blank' | '_self' | '_parent' | '_top'
+     */
+    target?: string;
+    /**
+     * Anchor `rel` attribute. When `external` is true the value is augmented
+     * with `noopener noreferrer`.
+     */
+    rel?: string;
+    /**
+     * Disables interaction. `<a>` and `<RouterLink>` are downgraded to a
+     * `<span aria-disabled="true">` since native anchors do not support `:disabled`.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Marks the link as external — forces `target="_blank"`,
+     * `rel="noopener noreferrer"`, and renders a trailing external-link icon.
+     * @default false
+     */
+    external?: boolean;
+    /**
+     * Underline behaviour.
+     * - `always`  — text-decoration always visible
+     * - `hover`   — only on hover / focus-visible
+     * - `none`    — never
+     * @default 'hover'
+     */
+    underline?: 'always' | 'hover' | 'none';
+    /**
+     * Color family applied to the link text.
+     * @default 'primary'
+     */
+    color?: `${BCommonColor}`;
+    /**
+     * Explicit element override. When set takes the highest priority over
+     * `to` / `href`. `'a'` requires either `href` or generates a no-op
+     * placeholder; `'button'` renders `<button type="button">`.
+     */
+    as?: 'a' | 'button';
+    /**
+     * Whether to render the trailing external-link icon when `external` is true.
+     * @default true
+     */
+    showExternalIcon?: boolean;
+};
+declare var __VLS_10: {}, __VLS_12: {}, __VLS_14: {}, __VLS_21: {}, __VLS_23: {}, __VLS_25: {}, __VLS_32: {}, __VLS_34: {}, __VLS_36: {}, __VLS_43: {}, __VLS_45: {}, __VLS_47: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_10) => any;
+} & {
+    default?: (props: typeof __VLS_12) => any;
+} & {
+    trailing?: (props: typeof __VLS_14) => any;
+} & {
+    leading?: (props: typeof __VLS_21) => any;
+} & {
+    default?: (props: typeof __VLS_23) => any;
+} & {
+    trailing?: (props: typeof __VLS_25) => any;
+} & {
+    leading?: (props: typeof __VLS_32) => any;
+} & {
+    default?: (props: typeof __VLS_34) => any;
+} & {
+    trailing?: (props: typeof __VLS_36) => any;
+} & {
+    leading?: (props: typeof __VLS_43) => any;
+} & {
+    default?: (props: typeof __VLS_45) => any;
+} & {
+    trailing?: (props: typeof __VLS_47) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (event: MouseEvent) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/types/components/BLink/index.d.ts

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

package/dist/types/components/BListbox/BListbox.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/BListbox/BListbox.vue.d.ts

@@ -0,0 +1,52 @@
+import { BCommonSize } from '@/types.ts';
+export interface BListboxOption<V> {
+    /** Display label for the option. */
+    label: string;
+    /** Value associated with the option. */
+    value: V;
+    /** Whether the option is disabled and skipped by keyboard navigation. */
+    disabled?: boolean;
+    /** Optional group label — adjacent options sharing the same group are wrapped together. */
+    group?: string;
+}
+declare const __VLS_export: <T>(__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<({
+        /** Array of selectable options. */
+        options?: BListboxOption<T>[];
+        /** Whether multiple options can be selected at once. */
+        multiple?: boolean;
+        /** Disables the entire listbox — no keyboard nav, no selection. */
+        disabled?: boolean;
+        /** Visual size preset. */
+        size?: `${BCommonSize}`;
+        /** Property name on each option that holds the value. Defaults to `'value'`. */
+        valueKey?: string;
+        /** Property name on each option that holds the label. Defaults to `'label'`. */
+        labelKey?: string;
+        /** Optional id for the root listbox element. Auto-generated if omitted. */
+        id?: string;
+    } & {
+        modelValue?: T | T[] | null;
+    }) & {
+        "onUpdate:modelValue"?: (value: T | T[]) => any;
+        onChange?: (value: T | T[]) => any;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        focus: () => void;
+        focusOption: (value: T) => void;
+    }>) => void;
+    attrs: any;
+    slots: {};
+    emit: ((evt: "change", value: T | T[]) => void) & ((event: "update:modelValue", value: T | T[]) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/types/components/BListbox/index.d.ts

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

package/dist/types/components/BModal/BModal.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/BPinInput/BPinInput.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/BPinInput/BPinInput.vue.d.ts

@@ -0,0 +1,43 @@
+import { BCommonSize } from '@/types.ts';
+type __VLS_Props = {
+    /** Number of cells (digits/characters) in the PIN. @default 6 */
+    length?: number;
+    /** Render the value as bullets (uses `type="password"` on each cell). @default false */
+    mask?: boolean;
+    /**
+     * Allowed character class:
+     * - `'number'` — digits 0-9 only (uses `inputmode="numeric"` + `pattern="[0-9]*"`).
+     * - `'text'` — any character.
+     * - `'alphanumeric'` — letters + digits only.
+     * @default 'number'
+     */
+    type?: 'number' | 'text' | 'alphanumeric';
+    /** Size preset applied to each cell. @default 'md' */
+    size?: `${BCommonSize}`;
+    /** Disable every cell. @default false */
+    disabled?: boolean;
+    /** Focus the first non-disabled cell on mount. @default false */
+    autoFocus?: boolean;
+    /** HTML id attribute applied to the wrapping group element. */
+    id?: string;
+    /** Accessible label for the wrapping `role="group"` element. @default 'PIN entry' */
+    ariaLabel?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: (index?: number) => void;
+    clear: () => void;
+    focusFirst: () => void;
+    focusLast: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    complete: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: string) => any;
+    onComplete?: (value: string) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/components/BPinInput/index.d.ts

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

package/dist/types/components/BProgress/BProgress.vue.d.ts

@@ -1,6 +1,51 @@
+import { BCommonColor, BCommonSize } from '@/types.ts';
+/** Visual shape — circular ring or horizontal linear bar. */
+export type BProgressShape = 'linear' | 'circle';
+/** Semantic status — non-`normal` values override `color` with a matching theme color. */
+export type BProgressStatus = 'normal' | 'success' | 'error' | 'warning';
 type __VLS_Props = {
-    percent: number;
+    /**
+     * Current progress value (uncontrolled fallback when `v-model` is not used).
+     * Clamped to `[0, max]`.
+     */
+    percent?: number;
+    /**
+     * Maximum value of the progress range. The displayed percentage is
+     * `(value / max) * 100`. Defaults to `100` so a raw `percent` works as a percentage.
+     */
+    max?: number;
+    /** Visual shape — circular ring or horizontal bar. Default `'circle'`. */
+    shape?: BProgressShape;
+    /** Size preset. Affects diameter for `circle` and track height for `linear`. */
+    size?: `${BCommonSize}`;
+    /** Color family for the filled portion. Overridden by `status` when not `'normal'`. */
+    color?: `${BCommonColor}`;
+    /** Semantic status. Maps to: `success`→success, `error`→failure, `warning`→warning. */
+    status?: BProgressStatus;
+    /** Whether to render the textual progress label. Default `true`. */
+    showLabel?: boolean;
+    /**
+     * Render an indefinite-duration animation instead of a value-driven fill.
+     * `aria-valuenow` is omitted while indeterminate, per ARIA spec.
+     */
+    indeterminate?: boolean;
+    /** Override for the bar / ring thickness. Numeric values are treated as `px`. */
+    strokeWidth?: string | number;
+    /**
+     * Custom label formatter — receives `(value, max, percentage)`.
+     * Defaults to `${Math.round(percentage)}%`.
+     */
+    formatter?: (value: number, max: number, percentage: number) => string;
 };
-declare const __VLS_export: 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>;
+type __VLS_ModelProps = {
+    /** Two-way bound progress value. Falls back to the `percent` prop when not bound. */
+    modelValue?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: number) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/types/components/BTextarea/BTextarea.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/BTextarea/BTextarea.vue.d.ts

@@ -0,0 +1,77 @@
+import { BCommonSize } from '@/types.ts';
+import { BInputStatus, BInputVariant } from '@/components/BInput/types.ts';
+type __VLS_Props = {
+    /** The size of the textarea — `sm` | `md` | `lg`. Default `md`. */
+    size?: `${BCommonSize}`;
+    /** Visual variant — `outlined` | `filled` | `borderless` | `underlined`. Default `outlined`. */
+    variant?: `${BInputVariant}`;
+    /** Whether the textarea is disabled. Default `false`. */
+    disabled?: boolean;
+    /** Whether the textarea is read-only. Default `false`. */
+    readOnly?: boolean;
+    /** Validation status — `error` | `warning`. */
+    status?: `${BInputStatus}`;
+    /** Placeholder text shown when empty. */
+    placeholder?: string;
+    /** Maximum number of characters allowed. */
+    maxLength?: number;
+    /** HTML id attribute. Auto-generated when omitted. */
+    id?: string;
+    /** Show clear button when textarea has value. Default `false`. */
+    allowClear?: boolean;
+    /** Display character count. `boolean` toggles a default formatter, or pass a function for custom output. Default `false`. */
+    showCount?: boolean | ((args: {
+        value: string;
+        count: number;
+        maxLength?: number;
+    }) => string);
+    /** Minimum height in rows (CSS `rows` attribute). Default `3`. */
+    rows?: number;
+    /**
+     * Auto-grow the textarea to fit its content.
+     * - `true` uses CSS `field-sizing: content` (no JS).
+     * - `{ minRows, maxRows }` uses a JS-clamped fallback for exact row bounds.
+     * Default `false`.
+     */
+    autosize?: boolean | {
+        minRows: number;
+        maxRows: number;
+    };
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    prefix?: (props: typeof __VLS_1) => any;
+} & {
+    suffix?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: () => void;
+    blur: () => void;
+    select: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    focus: (event: FocusEvent) => any;
+    "update:modelValue": (value: string) => any;
+    change: (value: string, event: Event) => any;
+    blur: (event: FocusEvent) => any;
+    clear: () => any;
+    pressEnter: (event: KeyboardEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onFocus?: (event: FocusEvent) => any;
+    "onUpdate:modelValue"?: (value: string) => any;
+    onChange?: (value: string, event: Event) => any;
+    onBlur?: (event: FocusEvent) => any;
+    onClear?: () => any;
+    onPressEnter?: (event: KeyboardEvent) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/types/components/BTextarea/index.d.ts

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

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

@@ -12,6 +12,7 @@ export * from './BCascader';
 export * from './BCheckbox';
 export * from './BCollapse';
 export * from './BColorPicker';
+export * from './BContextMenu';
 export * from './BDatePicker';
 export * from './BDescriptions';
 export * from './BDivider';
@@ -24,6 +25,9 @@ export { default as BIcon } from './BIcon/BIcon.vue';
 export * from './BImage';
 export * from './BInput';
 export * from './BInputNumber';
+export * from './BInputTags';
+export * from './BLink';
+export * from './BListbox';
 export * from './BMasonry';
 export * from './BMentions';
 export * from './BMenu';
@@ -31,6 +35,7 @@ export * from './BMessage';
 export * from './BModal';
 export * from './BNotification';
 export * from './BPagination';
+export * from './BPinInput';
 export * from './BPopconfirm';
 export * from './BPopover';
 export * from './BRadio';
@@ -45,9 +50,10 @@ export * from './BStatistic';
 export { default as BSteps } from './BSteps/BSteps.vue';
 export * from './BSwitch';
 export * from './BTable';
-export * from './BTimePicker';
 export * from './BTabs';
 export * from './BTag';
+export * from './BTextarea';
+export * from './BTimePicker';
 export * from './BTimeline';
 export * from './BTooltip';
 export * from './BTour';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@7pmlabs/design-system",
-  "version": "2.0.8",
+  "version": "2.1.0",
   "type": "module",
   "homepage": "https://github.com/ngphanducthinh/design-system",
   "repository": {