flowbite-vue - npm Package Compare versions

Comparing version 0.1.5 to 0.1.6

dist/components/FwbDropdown/FwbDropdown.vue.d.ts

@@ -14,3 +14,6 @@ import type { DropdownPlacement } from './types';
     alignToEnd: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    show: () => void;
+    hide: () => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
     placement?: DropdownPlacement | undefined;
@@ -27,3 +30,6 @@ text?: string | undefined;
     alignToEnd: boolean;
-}>>>, {
+}>>> & {
+    onShow?: (() => any) | undefined;
+    onHide?: (() => any) | undefined;
+}, {
     text: string;
@@ -30,0 +36,0 @@ transition: string;

dist/components/FwbInput/FwbInput.vue.d.ts

@@ -1,2 +0,2 @@
-import { type InputSize, type InputType, type ValidationStatus } from './types';
+import { type CommonAutoFill, type InputSize, type InputType, type ValidationStatus } from './types';
 interface InputProps {
@@ -9,2 +9,3 @@ disabled?: boolean;
     type?: InputType;
+    autocomplete?: CommonAutoFill;
     validationStatus?: ValidationStatus;
@@ -19,2 +20,3 @@ }
     type: string;
+    autocomplete: string;
     validationStatus: undefined;
@@ -28,2 +30,3 @@ }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<InputProps>, {
     type: string;
+    autocomplete: string;
     validationStatus: undefined;
@@ -37,2 +40,3 @@ }>>>, {
     modelValue: string;
+    autocomplete: CommonAutoFill;
     validationStatus: ValidationStatus;
@@ -39,0 +43,0 @@ }, {}>, {

dist/components/FwbInput/types.d.ts

 export type InputSize = 'sm' | 'md' | 'lg';
 export type InputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
+export type CommonAutoFill = 'on' | 'off' | 'email' | 'tel' | 'name' | 'username' | 'current-password' | 'country' | 'postal-code' | 'language' | 'bday';
 export declare const validationStatusMap: {
@@ -4,0 +5,0 @@ readonly Success: "success";

dist/components/FwbModal/FwbModal.vue.d.ts

@@ -1,2 +0,2 @@
-import type { ModalSize } from './types';
+import type { ModalPosition, ModalSize } from './types';
 interface ModalProps {
@@ -6,2 +6,3 @@ notEscapable?: boolean;
     size?: ModalSize;
+    position?: ModalPosition;
 }
@@ -12,2 +13,3 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<ModalProps>, {
     size: string;
+    position: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -20,2 +22,3 @@ close: (...args: any[]) => void;
     size: string;
+    position: string;
 }>>> & {
@@ -28,2 +31,3 @@ onClose?: ((...args: any[]) => any) | undefined;
     persistent: boolean;
+    position: ModalPosition;
 }, {}>, {
@@ -30,0 +34,0 @@ header?(_: {}): any;

dist/components/FwbModal/types.d.ts

@@ -1,2 +0,2 @@
-export type ModalPosition = 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right';
+export type ModalPosition = 'bottom-start' | 'bottom-end' | 'bottom-center' | 'top-start' | 'top-center' | 'top-end' | 'center-start' | 'center' | 'center-end';
 export type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl';

dist/components/FwbSelect/FwbSelect.vue.d.ts

@@ -1,2 +0,2 @@
-import type { InputSize } from './../FwbInput/types';
+import type { CommonAutoFill, InputSize } from './../FwbInput/types';
 import { type OptionsType, type ValidationStatus } from './types';
@@ -11,2 +11,3 @@ interface InputProps {
     size?: InputSize;
+    autocomplete?: CommonAutoFill;
     validationStatus?: ValidationStatus;
@@ -22,2 +23,3 @@ }
     size: string;
+    autocomplete: string;
     validationStatus: undefined;
@@ -34,2 +36,3 @@ }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     size: string;
+    autocomplete: string;
     validationStatus: undefined;
@@ -45,2 +48,3 @@ }>>> & {
     underline: boolean;
+    autocomplete: CommonAutoFill;
     validationStatus: ValidationStatus;
@@ -47,0 +51,0 @@ options: OptionsType[];

dist/components/FwbSidebar/FwbSidebarItem.vue.d.ts

 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
-    link?: string | undefined;
+    link?: string | {
+        name: string;
+    } | undefined;
     tag?: string | undefined;
@@ -8,3 +10,5 @@ }>, {
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
-    link?: string | undefined;
+    link?: string | {
+        name: string;
+    } | undefined;
     tag?: string | undefined;
@@ -15,3 +19,5 @@ }>, {
 }>>>, {
-    link: string;
+    link: string | {
+        name: string;
+    };
     tag: string;
@@ -18,0 +24,0 @@ }, {}>, {

dist/components/FwbTabs/FwbTabs.vue.d.ts

@@ -24,3 +24,3 @@ import type { TabsVariant } from './types';
     modelValue: string;
-    directive: "if" | "show";
+    directive: "show" | "if";
 }, {}>, {
@@ -27,0 +27,0 @@ default?(_: {}): any;

dist/components/FwbTextarea/FwbTextarea.vue.d.ts

@@ -0,1 +1,2 @@
+import type { CommonAutoFill } from './../FwbInput/types';
 interface TextareaProps {
@@ -7,2 +8,3 @@ modelValue?: string;
     placeholder?: string;
+    autocomplete?: CommonAutoFill;
 }
@@ -15,2 +17,3 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<TextareaProps>, {
     placeholder: string;
+    autocomplete: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -24,2 +27,3 @@ "update:modelValue": (...args: any[]) => void;
     placeholder: string;
+    autocomplete: string;
 }>>> & {
@@ -31,2 +35,3 @@ "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     modelValue: string;
+    autocomplete: CommonAutoFill;
     rows: number;
@@ -33,0 +38,0 @@ custom: boolean;

dist/components/FwbToggle/composables/useToggleClasses.d.ts

@@ -6,2 +6,3 @@ import { type Ref } from 'vue';
     color: Ref<string>;
+    reverse: Ref<boolean>;
 };
@@ -14,2 +15,4 @@ export declare function useToggleClasses(props: UseToggleClassesProps): {
     toggleBallClasses: import("vue").ComputedRef<string>;
+    toggleBallOrder: import("vue").ComputedRef<string>;
+    labelOrder: import("vue").ComputedRef<string>;
 };

dist/components/FwbToggle/FwbToggle.vue.d.ts

@@ -8,2 +8,3 @@ import type { InputSize } from '../../components/FwbInput/types';
     size?: InputSize;
+    reverse?: boolean;
 }
@@ -16,2 +17,3 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<ToggleProps>, {
     size: string;
+    reverse: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -25,5 +27,7 @@ "update:modelValue": (...args: any[]) => void;
     size: string;
+    reverse: boolean;
 }>>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    reverse: boolean;
     label: string;
@@ -30,0 +34,0 @@ size: InputSize;

dist/index.d.ts

@@ -71,2 +71,3 @@ export { default as FwbAccordion } from './components/FwbAccordion/FwbAccordion.vue';
 export { default as FwbP } from './components/Typography/FwbP.vue';
+export { default as FwbBlockquote } from './components/Typography/FwbBlockquote.vue';
 export { default as FlowbiteThemable } from './components/utils/FlowbiteThemable/FlowbiteThemable.vue';
@@ -73,0 +74,0 @@ export { default as FlowbiteThemableChild } from './components/utils/FlowbiteThemable/FlowbiteThemableChild.vue';

package.json

 {
   "name": "flowbite-vue",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "repository": {
@@ -5,0 +5,0 @@ "type": "git",

src/components/FwbBadge/composables/useBadgeClasses.ts

@@ -11,3 +11,3 @@ import type { BadgeSize, BadgeType } from '../types'
   default: 'text-blue-800 dark:text-blue-800',
-  dark: 'text-gray-800 dark:bg-gray-700',
+  dark: 'text-gray-800 dark:text-gray-300',
   red: 'text-red-800 dark:text-red-900',
@@ -14,0 +14,0 @@ green: 'text-green-800 dark:text-green-900',

src/components/FwbInput/types.ts

@@ -5,2 +5,5 @@ export type InputSize = 'sm' | 'md' | 'lg'
 
+// A simplified version of AutFill, which is to complex for TypeScript to handle
+export type CommonAutoFill = 'on' | 'off' | 'email' | 'tel' | 'name' | 'username' | 'current-password' | 'country' | 'postal-code' | 'language' | 'bday'
+
 export const validationStatusMap = {
@@ -7,0 +10,0 @@ Success: 'success',

src/components/FwbModal/types.ts

@@ -1,2 +0,2 @@
-export type ModalPosition = 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right';
+export type ModalPosition = 'bottom-start' | 'bottom-end' | 'bottom-center' | 'top-start' | 'top-center' | 'top-end' | 'center-start' | 'center' | 'center-end';
 export type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl';

src/components/FwbSelect/composables/useSelectClasses.ts

@@ -15,3 +15,3 @@ import { computed, type Ref } from 'vue'
 const disabledSelectClasses = 'cursor-not-allowed bg-gray-100'
-const underlineSelectClasses = 'bg-transparent dark:bg-transparent border-b-2 border-gray-200 appearance-none dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer'
+const underlineSelectClasses = 'bg-transparent dark:bg-transparent dark:text-gray-500 border-b-2 border-gray-200 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer'
 const selectSizeClasses: Record<InputSize, string> = {
@@ -18,0 +18,0 @@ lg: 'p-4',

src/components/FwbTextarea/composables/useTextareaClasses.ts

@@ -5,3 +5,3 @@ import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
 const textareaWrapperClasses = 'block w-full mb-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600'
-const textareaDefaultClasses = 'block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-200 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'
+const textareaDefaultClasses = 'block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-200 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 disabled:cursor-not-allowed disabled:opacity-50'
 const textareaLabelClasses = 'block mb-2 text-sm font-medium text-gray-900 dark:text-white'
@@ -8,0 +8,0 @@ const textareaFooterClasses = 'block py-2 px-3 border-gray-200 dark:border-gray-600'

src/components/FwbToggle/composables/useToggleClasses.ts

@@ -6,9 +6,21 @@ import { computed, type Ref } from 'vue'
 const defaultLabelClasses = 'w-fit relative inline-flex items-center cursor-pointer'
-const defaultToggleBackgroundClasses = 'bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[""] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600'
-const defaultToggleBallClasses = 'ml-3 text-sm font-medium text-gray-900 dark:text-gray-300'
+const defaultToggleBackgroundClasses = 'relative bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[""] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:border-gray-600 peer-checked:bg-blue-600'
+const defaultToggleBallClasses = 'text-sm font-medium text-gray-900 dark:text-gray-300'
+
+const labelOrderClasses: Record<string, string> = {
+  direct: '',
+  reverse: 'flex-row-reverse',
+}
+
+const toggleBallOrderClasses: Record<string, string> = {
+  direct: 'ms-3',
+  reverse: 'me-3',
+}
+
 const toggleSizeClasses: Record<InputSize, string> = {
-  lg: 'w-14 h-7 after:top-0.5 after:left-[4px] after:h-6 after:w-6',
-  md: 'w-11 h-6 after:top-[2px] after:left-[2px] after:h-5 after:w-5',
-  sm: 'w-9 h-5 after:top-[2px] after:left-[2px] after:h-4 after:w-4',
+  lg: 'w-14 h-7 after:top-0.5 after:start-[4px] after:h-6 after:w-6',
+  md: 'w-11 h-6 after:top-[2px] after:start-[2px] after:h-5 after:w-5',
+  sm: 'w-9 h-5 after:top-[2px] after:start-[2px] after:h-4 after:w-4',
 }
+
 const toggleColorClasses: Record<string, string> = {
@@ -26,2 +38,3 @@ red: 'peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600',
   color: Ref<string>
+  reverse: Ref<boolean>
 }
@@ -35,2 +48,4 @@
   const toggleBallClasses = computed(() => defaultToggleBallClasses)
+  const toggleBallOrder = computed(() => toggleBallOrderClasses[props.reverse.value ? 'reverse' : 'direct'])
+  const labelOrder = computed(() => labelOrderClasses[props.reverse.value ? 'reverse' : 'direct'])
 
@@ -43,3 +58,5 @@ return {
     toggleBallClasses,
+    toggleBallOrder,
+    labelOrder,
   }
 }

src/index.ts

@@ -75,2 +75,3 @@ export { default as FwbAccordion } from './components/FwbAccordion/FwbAccordion.vue'
 export { default as FwbP } from './components/Typography/FwbP.vue'
+export { default as FwbBlockquote } from './components/Typography/FwbBlockquote.vue'
 
@@ -77,0 +78,0 @@ // utilities

No alert changes

Improved metrics

Total package byte prevSize

804437

increased by1.11%

Number of package files

291

increased by0.69%

Lines of code

15008

increased by1.06%

No dependency changes