@bagelink/vue 1.15.13 → 1.15.26

package/dist/types/BagelForm.d.ts

@@ -1,14 +1,24 @@
-import { Paths, Get, IterableElement, OmitIndexSignature } from 'type-fest';
+import { Paths, Get, OmitIndexSignature } from 'type-fest';
 import { ToString } from 'type-fest/source/internal';
 import { LiteralStringUnion } from 'type-fest/source/literal-union';
 import { PathsOptions, DefaultPathsOptions } from 'type-fest/source/paths';
 import { VNode } from 'vue';
 import { BagelInputShellProps } from '../components/form/inputs/bagelInputShell';
-type ArrayAttrs = any;
 interface Option {
     label: string;
     value: any;
 }
+export type _Path<T, PO extends PathsOptions = DefaultPathsOptions> = ToString<Paths<OmitIndexSignature<T>, PO>>;
+type IndexSignaturePaths<T> = {
+    [K in keyof T]: T[K] extends {
+        [key: string]: any;
+    } ? `${K & string}.${string}` : never;
+}[keyof T];
+export type Path<T, PO extends PathsOptions = DefaultPathsOptions> = FieldVal<T, _Path<T, PO>> extends Array<any> ? LiteralStringUnion<_Path<T, PO>> : _Path<T, PO> | IndexSignaturePaths<T> | `${keyof T & string}.more_info.${string}`;
+/** The value type at path P in object T. Falls back to unknown if resolution fails. */
+export type FieldVal<T, P extends Path<T>> = unknown extends Get<T, P> ? unknown : Get<T, P>;
+/** Field value type that preserves type information when possible. */
+export type SmartFieldVal<T, P extends Path<T>> = P extends string ? P extends keyof T ? T[P] : any : FieldVal<T, P>;
 export type AttributeValue = string | number | boolean | undefined | {
     [key: string]: any;
 };
@@ -16,7 +26,7 @@ export type AttributeFn<T, P extends Path<T>> = (field: SmartFieldVal<T, P>, row
 export interface Attributes<T, P extends Path<T>> {
     [key: string]: AttributeValue | AttributeFn<T, P>;
 }
-export type BagelFieldOptions<T, P extends Path<T>> = string | ({
+export type FieldOptions<T, P extends Path<T>> = string | ({
     label?: string;
     value: string | number;
 } | string | number | boolean | {
@@ -24,37 +34,8 @@ export type BagelFieldOptions<T, P extends Path<T>> = string | ({
 })[] | ((val?: SmartFieldVal<T, P>, rowData?: T) => Option[] | ((query: string) => Promise<Option[]>)) | ((query: string, val?: SmartFieldVal<T, P>, rowData?: T) => Promise<Option[]>);
 export type VIfType<T, P extends Path<T>> = string | boolean | ((val?: SmartFieldVal<T, P>, rowData?: T) => boolean);
 export type ValidationFn<T, P extends Path<T>> = (val?: SmartFieldVal<T, P>, rowData?: T) => string | undefined;
-export interface ShallowPathsOptions extends PathsOptions {
-    maxRecursionDepth: 0;
-}
-export type _Path<T, PO extends PathsOptions = DefaultPathsOptions> = ToString<Paths<OmitIndexSignature<T>, PO>>;
-export type OpenEndedPath<T> = keyof T extends infer K ? K extends keyof T ? T[K] extends {
-    [key: string]: any;
-} ? `${K & string}.${string}` : never : never : never;
-type IndexSignaturePaths<T> = {
-    [K in keyof T]: T[K] extends {
-        [key: string]: any;
-    } ? T[K] extends {
-        [key: string]: infer V;
-    } ? `${K & string}.${string}` : never : never;
-}[keyof T];
-export type Path<T, PO extends PathsOptions = DefaultPathsOptions> = FieldVal<T, _Path<T, PO>> extends Array<any> ? LiteralStringUnion<_Path<T, PO>> : _Path<T, PO> | IndexSignaturePaths<T> | `${keyof T & string}.more_info.${string}`;
-export type SmartFieldVal<T, P extends Path<T>> = P extends string ? P extends keyof T ? T[P] : any : FieldVal<T, P>;
-export type SmartBagelFieldOptions<T, P extends Path<T>> = string | ({
-    label?: string;
-    value: string | number;
-} | string | number | boolean | {
-    [key: string]: any;
-})[] | ((val?: SmartFieldVal<T, P>, rowData?: T) => Option[] | ((query: string) => Promise<Option[]>)) | ((query: string, val?: SmartFieldVal<T, P>, rowData?: T) => Promise<Option[]>);
-export type SmartVIfType<T, P extends Path<T>> = string | boolean | ((val?: SmartFieldVal<T, P>, rowData?: T) => boolean);
-export type SmartValidationFn<T, P extends Path<T>> = (val?: SmartFieldVal<T, P>, rowData?: T) => string | undefined;
-export type SmartAttributeFn<T, P extends Path<T>> = (field: SmartFieldVal<T, P>, row?: T) => AttributeValue;
-export type SmartTransformFn<T, P extends Path<T>> = (val?: SmartFieldVal<T, P>, rowData?: T) => any;
-export type SmartUpdateFn<T, P extends Path<T>> = (val?: SmartFieldVal<T, P>, rowData?: T) => unknown;
-/** The value type at path P in object T. */
-export type FieldVal<T, P extends Path<T>> = unknown extends Get<T, P> ? unknown : Get<T, P>;
-/** If path P in T is an array, this gives the array's element type. */
-export type ArrayFieldVal<T, P extends Path<T>> = IterableElement<Get<T, P>>;
+export type TransformFn<T, P extends Path<T>> = (val?: SmartFieldVal<T, P>, rowData?: T) => any;
+export type UpdateFn<T, P extends Path<T>> = (val?: SmartFieldVal<T, P>, rowData?: T) => unknown;
 export type VNodeFn<T, P extends Path<T>> = (props: {
     row?: T;
     field: BaseBagelField<T, P>;
@@ -79,45 +60,26 @@ export interface BaseBagelField<T, P extends Path<T, PO>, PO extends PathsOption
     'id'?: P;
     'label'?: string;
     'placeholder'?: string;
-    'class'?: AttributeValue | SmartAttributeFn<T, P>;
+    'class'?: AttributeValue | AttributeFn<T, P>;
     'attrs'?: Attributes<T, P>;
     'required'?: boolean;
     'disabled'?: boolean;
     'helptext'?: string;
-    'options'?: SmartBagelFieldOptions<T, P>;
+    'options'?: FieldOptions<T, P>;
     'children'?: SchemaChild<T, Path<T, PO>, PO>[];
     'slots'?: {
         [key: string]: SchemaChild<T, Path<T, PO>, PO>[];
     };
     'defaultValue'?: any;
-    'vIf'?: SmartVIfType<T, P>;
-    'v-if'?: SmartVIfType<T, P>;
-    'transform'?: SmartTransformFn<T, P>;
-    'onUpdate'?: SmartUpdateFn<T, P>;
-    'validate'?: SmartValidationFn<T, P>;
+    'vIf'?: VIfType<T, P>;
+    'v-if'?: VIfType<T, P>;
+    'transform'?: TransformFn<T, P>;
+    'onUpdate'?: UpdateFn<T, P>;
+    'validate'?: ValidationFn<T, P>;
 }
-export type _MappedBaseBagelField<T, PO extends PathsOptions = DefaultPathsOptions> = {
-    [P in Path<T, PO>]: BaseBagelField<T, P, PO>;
-};
-export type MappedBaseBagelFieldP<T, P extends Path<T, PO>, PO extends PathsOptions = DefaultPathsOptions> = _MappedBaseBagelField<T, PO>[P];
-export type FieldByP<T, P extends Path<T, PO>, PO extends PathsOptions = DefaultPathsOptions> = MappedBaseBagelFieldP<T, P, PO>;
-export type Field<T, PO extends PathsOptions = DefaultPathsOptions> = MappedBaseBagelFieldP<T, Path<T, PO>, PO>;
-export type BglFieldT<T, PO extends PathsOptions = DefaultPathsOptions> = Field<T, PO>;
+export type Field<T, PO extends PathsOptions = DefaultPathsOptions> = ValidBaseBagelField<T, PO>;
 export type SchemaField<T, PO extends PathsOptions = DefaultPathsOptions> = Field<T, PO> | ElementField<T, PO>;
 export type BglFormSchemaT<T, PO extends PathsOptions = DefaultPathsOptions> = (SchemaField<T, PO> | BaseBagelField<T, Path<T, PO>, PO>)[];
-export type ShallowBglFormSchemaT<T, PO extends PathsOptions = ShallowPathsOptions> = (SchemaField<T, PO> | BaseBagelField<T, Path<T, PO>, PO>)[];
-export interface InputBagelField<T, P extends Path<T, PO>, PO extends PathsOptions = DefaultPathsOptions> extends BaseBagelField<T, P, PO> {
-    $el: 'text' | any;
-    type?: string;
-}
-export interface SelectBagelField<T, P extends Path<T, PO>, PO extends PathsOptions = DefaultPathsOptions> extends BaseBagelField<T, P, PO> {
-    $el: 'select' | any;
-    type?: string;
-}
-export interface ArrayBagelField<T, P extends Path<T, PO>, PO extends PathsOptions = DefaultPathsOptions> extends BaseBagelField<T, P, PO> {
-    $el: 'array' | any;
-    attrs?: ArrayAttrs;
-}
 export interface ValidateInputBaseT {
     validate?: ValidationFn<{
         [key: string]: unknown;

package/dist/types/BtnOptions.d.ts

@@ -2,18 +2,20 @@ import { IconType, ThemeType } from '.';
 export interface BtnOptions {
     onClick?: () => void;
     color?: ThemeType;
-    theme?: ThemeType;
     disabled?: boolean;
     icon?: IconType;
+    variant?: 'solid' | 'flat' | 'outline';
     flat?: boolean;
+    outline?: boolean;
+    /** @deprecated Use `outline` */
+    border?: boolean;
     thin?: boolean;
     type?: 'button' | 'submit' | 'reset';
     loading?: boolean;
     role?: string;
     value?: string;
-    border?: boolean;
 }
 export type UnitSize = 'px' | 'rem' | 'vh' | 'vw';
-export type SizeType = 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge';
+export type SizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type SizeUnit = `${number}` | number | `${number}${UnitSize}`;
 //# sourceMappingURL=BtnOptions.d.ts.map

package/dist/types/TableSchema.d.ts

@@ -12,6 +12,9 @@ export interface TableSchemaProps<T extends {
     columns?: MaybeRefOrGetter<string[]>;
     useServerSort?: boolean;
     selectable?: boolean;
+    sortable?: boolean | {
+        handle?: string;
+    };
     onLastItemVisible?: () => void;
 }
 export interface SortingOptions {

package/dist/types/index.d.ts

@@ -1,7 +1,6 @@
 import { IconType, MaterialIcons } from '../components/Icon/types';
 export type { AvailabilitySlot, CalendarEvent, CalendarProps, CalendarView, CalendarViewState } from '../components/calendar/CalendarTypes';
 export type { IconType, MaterialIcons };
-export type { ModalComponentProps, ModalComponentProps as ModalFormComponentProps, ModalOptions, } from '../plugins/modalTypes';
 export type { AddToCalendarEvent } from '../utils/calendar/types';
 export * from './BagelForm';
 export * from './BtnOptions';
@@ -16,7 +15,7 @@ export type ThemeType = 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'brown'
 export type ExtendedThemeType = 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'brown' | 'orange' | 'turquoise' | 'gray' | 'black' | 'pink' | 'primary' | 'white' | 'blue-light' | 'green-light' | 'red-light' | 'yellow-light' | 'purple-light' | 'brown-light' | 'orange-light' | 'turquoise-light' | 'pink-light' | 'gray-light' | 'primary-light' | 'blue-tint' | 'red-tint' | 'primary-tint' | 'black-tint' | 'blue-dark' | 'light' | 'blue-10' | 'green-10' | 'red-10' | 'yellow-10' | 'purple-10' | 'brown-10' | 'orange-10' | 'turquoise-10' | 'gray-10' | 'black-10' | 'pink-10' | 'blue-20' | 'green-20' | 'red-20' | 'yellow-20' | 'purple-20' | 'brown-20' | 'orange-20' | 'turquoise-20' | 'gray-20' | 'black-20' | 'pink-20' | 'blue-30' | 'green-30' | 'red-30' | 'yellow-30' | 'purple-30' | 'brown-30' | 'orange-30' | 'turquoise-30' | 'gray-30' | 'black-30' | 'pink-30' | 'blue-40' | 'green-40' | 'red-40' | 'yellow-40' | 'purple-40' | 'brown-40' | 'orange-40' | 'turquoise-40' | 'gray-40' | 'black-40' | 'pink-40' | 'blue-50' | 'green-50' | 'red-50' | 'yellow-50' | 'purple-50' | 'brown-50' | 'orange-50' | 'turquoise-50' | 'gray-50' | 'black-50' | 'pink-50' | 'blue-60' | 'green-60' | 'red-60' | 'yellow-60' | 'purple-60' | 'brown-60' | 'orange-60' | 'turquoise-60' | 'gray-60' | 'black-60' | 'pink-60' | 'blue-70' | 'green-70' | 'red-70' | 'yellow-70' | 'purple-70' | 'brown-70' | 'orange-70' | 'turquoise-70' | 'gray-70' | 'black-70' | 'pink-70' | 'blue-80' | 'green-80' | 'red-80' | 'yellow-80' | 'purple-80' | 'brown-80' | 'orange-80' | 'turquoise-80' | 'gray-80' | 'black-80' | 'pink-80' | 'blue-90' | 'green-90' | 'red-90' | 'yellow-90' | 'purple-90' | 'brown-90' | 'orange-90' | 'turquoise-90' | 'gray-90' | 'black-90' | 'pink-90' | 'blue-100' | 'green-100' | 'red-100' | 'yellow-100' | 'purple-100' | 'brown-100' | 'orange-100' | 'turquoise-100' | 'gray-100' | 'black-100' | 'pink-100' | 'blue-110' | 'green-110' | 'red-110' | 'yellow-110' | 'purple-110' | 'brown-110' | 'orange-110' | 'turquoise-110' | 'gray-110' | 'black-110' | 'pink-110' | 'blue-120' | 'green-120' | 'red-120' | 'yellow-120' | 'purple-120' | 'brown-120' | 'orange-120' | 'turquoise-120' | 'gray-120' | 'black-120' | 'pink-120' | 'blue-130' | 'green-130' | 'red-130' | 'yellow-130' | 'purple-130' | 'brown-130' | 'orange-130' | 'turquoise-130' | 'gray-130' | 'black-130' | 'pink-130' | 'Error' | 'Paid' | 'Active';
 export interface OptionObject {
     label: string;
-    value: string | number;
+    value: string | number | boolean;
     icon?: IconType;
     [key: string]: any;
 }

package/dist/utils/calendar/dateUtils.d.ts

@@ -1,6 +1,5 @@
-import { timeDelta, formatDate, fmtDate, handleTimezone, getDatePartsMap, utc, local } from '@bagelink/utils';
-export { fmtDate, formatDate, getDatePartsMap, handleTimezone, timeDelta, utc, local };
-export type { DateTimeAcceptedFormats, FormatDateOptions } from '@bagelink/utils';
+export { fmtDate, formatDate, getDatePartsMap, handleTimezone, timeDelta, utc, local } from '../date';
+export type { DateTimeAcceptedFormats, FormatDateOptions } from '../date';
 type TimeAgoLang = 'en' | 'es' | 'fr' | 'he' | 'it' | 'ru';
 export declare function timeAgo(date: string | Date, langOrConfig?: TimeAgoLang | {
     lang?: TimeAgoLang;

package/dist/utils/constants.d.ts

@@ -1,3 +1,9 @@
+/**
+ * The single mobile breakpoint, matching the CSS media query
+ * `@media (max-width: 910px)` used by all `m_*` utilities.
+ * A viewport is "mobile" when `window.innerWidth <= MOBILE_BREAKPOINT`.
+ */
+export declare const MOBILE_BREAKPOINT = 910;
 export declare const IMAGE_FORMATS: string[];
 export declare const IMAGE_FORMATS_REGEXP: RegExp;
 export declare const VIDEO_FORMATS: string[];

package/dist/utils/index.d.ts

@@ -4,6 +4,13 @@ export declare function slugify(str: string): string;
 export declare function keyToLabel(key?: string): string | undefined;
 export declare function copyText(text: string, cb?: (msg: string) => void): Promise<void>;
 export declare function initials(...strArr: string[]): string;
+/**
+ * Strip script-capable content from an HTML string so it is safe for v-html.
+ * Removes <script>/<style>/<iframe>/<object>/<embed> elements, on* event
+ * handler attributes, and javascript: / data: URLs in href/src.
+ * Allowlist-free by design — formatting tags (b, i, a, span…) pass through.
+ */
+export declare function sanitizeHtml(html: string): string;
 export declare function useEscape(event: KeyboardEvent, closeModel: () => void): void;
 export declare function classify(fieldVal?: any, row?: any, ...classes: any[]): string;
 export declare function bindAttrs<T, P extends Path<T>>(attrs?: Attributes<T, P>, fieldVal?: any, row?: T): {
@@ -19,21 +26,35 @@ export declare function sleep(ms?: number): Promise<unknown>;
 export declare function appendScript(src: string, options?: {
     id?: string;
 }): Promise<void>;
+/**
+ * Wait for a global (e.g. a CDN script's `window.X`) to become available.
+ * Resolves with the global value, or rejects after `timeout` ms (default 10s).
+ *
+ * @example
+ * await appendScript('https://unpkg.com/leaflet/dist/leaflet.js')
+ * const L = await awaitGlobal('L')
+ */
+export declare function awaitGlobal<T = any>(name: string, { timeout, interval }?: {
+    timeout?: number;
+    interval?: number;
+}): Promise<T>;
 export declare function appendStyle(src: string): Promise<void>;
 export declare function normalizeURL(url: string): string;
 export declare function normalizeDimension(value: string | number | undefined, defaultMetric?: string): string | undefined;
-export * as bagelFormUtils from './BagelFormUtils';
-export { useForm } from './BagelFormUtils';
 export type { NormalizedOption } from './options';
 export { getOptionIcon, getOptionLabel, getOptionValue, normalizeOption } from './options';
 export type { ComparisonOperator, FilterCondition, LogicalOperator, QueryConditions, QueryFilter } from './queryFilter';
 export { anyOf, parseQuery, queryFilter, range, search } from './queryFilter';
 export type { ShowdownConverter, ShowdownOptions } from './showdown';
-export declare function pathKeyToURL(pathKey?: string | null): string | null | undefined;
+export declare function pathKeyToURL(pathKey?: string | null): string | undefined;
 export declare function getNestedValue(obj: any, path?: string, defaultValue?: any): any;
 export declare function tryRun<T>(func: () => T, callback?: (error: Error) => void): T | undefined;
 export declare function downloadFile(source: string | Blob, fileName?: string): void;
 export { defaultOptions, showdown } from './showdown';
+export type { CommonDateFormats, CommonDateTimeFormats, CommonTimeFormats, DateDiffUnit, DateTimeAcceptedFormats, FormatDateOptions, NamedFormats, TimeDeltaOptions, TimeDeltaUnit, } from './date';
+export { d, DateChain, dateDiff, DAY, fmtDate, formatDate, getDatePartsMap, handleTimezone, HOUR, local, MINUTE, MS, SECOND, timeDelta, utc, WEEK, } from './date';
+export * from './fetch';
+export * from './string';
 export { formatString } from './strings';
 export { useDebounceFn } from '@vueuse/core';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/options.d.ts

@@ -2,7 +2,7 @@ import { IconType, Option, OptionObject } from '../types';
 export type { OptionObject };
 export type NormalizedOption<T extends Record<string, any> = Record<string, never>> = T & {
     label: string;
-    value: string | number;
+    value: string | number | boolean;
     icon?: IconType;
 };
 /**
@@ -10,7 +10,7 @@ export type NormalizedOption<T extends Record<string, any> = Record<string, neve
  */
 export declare function getOptionLabel(option: Option): string;
 /** Extract the primitive value from an option. */
-export declare function getOptionValue(option?: Option): string | number | undefined;
+export declare function getOptionValue(option?: Option): string | number | boolean | undefined;
 /** Extract the icon from an option, if present. */
 export declare function getOptionIcon(option?: Option): IconType | undefined;
 /** Normalize any option shape to a {label, value, icon?, ...} object, preserving any extra fields. */

package/dist/utils/showdown.d.ts

@@ -1,3 +1,9 @@
+/**
+ * ⚠️ Security note: `makeHtml()` output is NOT sanitized — raw HTML in the
+ * markdown source passes through. If the markdown can contain user-generated
+ * content, run the result through `sanitizeHtml()` (from utils) before
+ * binding it with v-html.
+ */
 /**
  * Showdown configuration options
  */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.13",
+  "version": "1.15.26",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/AccordionItem.vue

@@ -100,69 +100,73 @@ function toggle() {
 </template>
 
 <style scoped>
+
 .accordion-item {
-	border-bottom: 1px solid var(--bgl-border-color);
-	transition: all 0.2s;
-	overflow: hidden;
+border-bottom: 1px solid var(--bgl-border-color);
+transition: all 0.2s;
+overflow: hidden;
 }
 
 .accordion-item button {
-	cursor: pointer;
+cursor: pointer;
 }
 
 .accordion-head {
-	height: var(--bgl-input-height);
-	background: transparent;
-	display: flex;
-	width: 100%;
-	align-items: center;
-	justify-content: space-between;
-	border: none;
-	color: inherit !important;
+height: var(--bgl-input-height);
+background: transparent;
+display: flex;
+width: 100%;
+align-items: center;
+justify-content: space-between;
+border: none;
+color: inherit !important;
 }
 
 .accordion-icon {
-	transition: all 0.2s ease;
-	display: flex;
-	align-items: center;
-	flex-shrink: 0;
-	width: calc(var(--bgl-btn-height) / 1.5);
-	height: calc(var(--bgl-btn-height) / 1.5);
-	padding-inline: calc(var(--bgl-btn-padding) / 3);
-	justify-content: center;
+transition: all 0.2s ease;
+display: flex;
+align-items: center;
+flex-shrink: 0;
+width: calc(var(--bgl-btn-height) / 1.5);
+height: calc(var(--bgl-btn-height) / 1.5);
+padding-inline: calc(var(--bgl-btn-padding) / 3);
+justify-content: center;
 }
 
 [aria-expanded="true"] .accordion-icon {
-	transform: rotate(180deg);
+transform: rotate(180deg);
 }
 
 .accordion-label {
-	font-weight: bold;
+font-weight: bold;
 }
 
 .flat.accordion-item {
-	border-bottom: none
+border-bottom: none
 }
 
 .accordion-head:hover .accordion-label {
-	text-decoration: underline;
+text-decoration: underline;
 }
+
 </style>
 
 <style>
+
 .expand-enter-active,
 .expand-leave-active {
-	transition: all 0.2s;
-	transition-delay: 0ms;
+transition: all 0.2s;
+transition-delay: 0ms;
 }
 
 .expand-enter-from,
 .expand-leave-to {
-	max-height: 0;
+max-height: 0;
 }
 
 .expand-enter-to,
 .expand-leave-from {
-	max-height: 300px;
+max-height: 300px;
 }
+
 </style>

package/src/components/Avatar.vue

@@ -28,22 +28,24 @@ withDefaults(defineProps<{
 </template>
 
 <style scoped>
+
 .avatar {
-	background-color: var(--bgl-gray-tint);
-	border: 0.5px solid var(--bgl-border-color);
-	flex-shrink: 0;
+background-color: var(--bgl-gray-tint);
+border: 0.5px solid var(--bgl-border-color);
+flex-shrink: 0;
 }
 
 .avatar p {
-	font-size: 1.5rem;
-	line-height: 50px;
-	margin: 0;
-	font-weight: 200;
+font-size: 1.5rem;
+line-height: 50px;
+margin: 0;
+font-weight: 200;
 }
 
 .avatar img {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
+width: 100%;
+height: 100%;
+object-fit: cover;
 }
+
 </style>

package/src/components/Badge.vue

@@ -107,22 +107,23 @@ const computedClasses = computed(() => {
 </template>
 
 <style scoped>
+
 .pillLarge{
-	--bgl-pill-font-size: var(--bgl-font-size);
-	--bgl-pill-height:auto;
+--bgl-pill-font-size: var(--bgl-font-size);
+--bgl-pill-height:auto;
 }
 .pillSmall{
-	--bgl-pill-font-size: 9px;
-	--bgl-pill-height:15px;
+--bgl-pill-font-size: 9px;
+--bgl-pill-height:15px;
 }
 .pillText{
-	font-size: var(--bgl-pill-font-size);
+font-size: var(--bgl-pill-font-size);
 }
 .bgl_pill-btn{
-	color: var(--bgl-pill-btn-color);
-	background: var(--bgl-pill-btn-bg);
-	width: calc(var(--bgl-pill-height) / 1.25)!important;
-	height: calc(var(--bgl-pill-height) / 1.25)!important;
+color: var(--bgl-pill-btn-color);
+background: var(--bgl-pill-btn-bg);
+width: calc(var(--bgl-pill-height) / 1.25)!important;
+height: calc(var(--bgl-pill-height) / 1.25)!important;
 }
 .loading {
   border: 1px solid var(--bgl-light-text);
@@ -134,15 +135,15 @@ const computedClasses = computed(() => {
   margin: auto;
 }
 .bgl_flatPill .loading {
-	border-bottom: 2px solid var(--bgl-text-color);
+border-bottom: 2px solid var(--bgl-text-color);
 }
 
 @keyframes spin {
   0% {
-    transform: rotate(0deg);
+transform: rotate(0deg);
   }
   100% {
-    transform: rotate(360deg);
+transform: rotate(360deg);
   }
 }
 
@@ -162,6 +163,7 @@ vertical-align: middle;
   cursor: not-allowed;
 }
 .bgl_pill.round {
-	border-radius: 1000px;
+border-radius: 1000px;
 }
+
 </style>

package/src/components/BglVideo.vue

@@ -122,24 +122,26 @@ const videoUrl = computed(() => {
 </template>
 
 <style scoped>
+
 .bgl_vid iframe,
 .bgl_vid video {
-	width: 100%;
-	height: auto;
-	display: block;
-	margin: auto;
-	border-radius: var(--bgl-input-border-radius);
+width: 100%;
+height: auto;
+display: block;
+margin: auto;
+border-radius: var(--bgl-input-border-radius);
 }
 
 .bgl_vid.vid_empty {
-	padding-top: 56.25%;
-	background: var(--bgl-input-bg);
-	border-radius: var(--bgl-input-border-radius);
+padding-top: 56.25%;
+background: var(--bgl-input-bg);
+border-radius: var(--bgl-input-border-radius);
 }
 
 .bgl_vid.vid_short {
-	max-width: 56.25vh;
-	/* Limit width for shorts to maintain aspect ratio */
-	margin: 0 auto;
+max-width: 56.25vh;
+/* Limit width for shorts to maintain aspect ratio */
+margin: 0 auto;
 }
+
 </style>