@davincihealthcare/elty-design-system-vue 1.9.4 → 1.10.1

package/README.md

@@ -23,8 +23,8 @@ module.exports = {
   ...
   content: [..., './node_modules/@davincihealthcare/elty-design-system-vue/**/*.{tsx,js}'],
   plugins: [
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/typography'),
+    require('@tailwindcss/forms'), // ⚠️
+    require('@tailwindcss/typography'), // ⚠️
     require('@davincihealthcare/elty-design-system-vue').EltyTailwindPlugin
   ]
   ...
@@ -78,3 +78,36 @@ const onClick = () => {
 };
 </script>
 ```
+
+## Tech stuff and instructions 🔥🔥
+
+As it has been set the following as `peer dependencies`
+
+- @tailwindcss/forms
+- @tailwindcss/typography
+- vee-validate
+- vue
+
+**please check for compatibility issues if you experience something strange**
+
+## Style Configuration (style.cjs):
+
+This section handles the styling for your Vue component library, leveraging Tailwind CSS for efficiency. Here's a breakdown of the process:
+
+1. Base Styles (src/style.css):
+
+   This file is where you define the foundational CSS styles that you want to use in conjunction with Tailwind. Focus on including essential styles that are unlikely to change frequently. This helps maintain a clean separation between your core design principles and the dynamic nature of Tailwind classes.
+
+2. Tailwind Processing (yarn build):
+   Running yarn build triggers postcss, a CSS preprocessor. It scans src/style.css and replaces Tailwind directives (@apply, etc.) with actual CSS classes based on your Tailwind configuration. The processed output is saved as dist/style.css.
+
+3. CJS Conversion (yarn build-prejss):
+   A separate script (potentially yarn build-prejss) is called during yarn build. It takes the processed CSS file (dist/style.css) and generates a CommonJS module (dist/style.cjs). This format is necessary because your src/tailwind.plugin.ts file will import it (explained below).
+
+4. Tailwind Integration (src/tailwind.plugin.ts):
+   This file defines the Tailwind plugin used within your library. It imports the generated dist/style.cjs file. When you integrate your library into another project that has Tailwind installed, this import will work seamlessly because the library will include the compiled style.cjs file.
+
+   Key Points:
+
+   You don't need to worry about providing dist/style.cjs separately. It's included in the built library package.
+   Your library's components can leverage Tailwind classes by referencing them directly.

package/dist/ElAvatar.vue.d.ts

@@ -1,16 +1,24 @@
 export declare const elAvatarSizes: readonly ["xxs", "xs", "sm", "md", "lg", "xl"];
 export type ElAvatarSize = (typeof elAvatarSizes)[number];
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    picture: string;
+    picture?: string | undefined;
     size: ElAvatarSize;
+    label?: string | undefined;
 }>, {
+    picture: undefined;
     size: string;
+    label: undefined;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    picture: string;
+    picture?: string | undefined;
     size: ElAvatarSize;
+    label?: string | undefined;
 }>, {
+    picture: undefined;
     size: string;
+    label: undefined;
 }>>>, {
+    label: string;
+    picture: string;
     size: ElAvatarSize;
 }, {}>;
 export default _default;

package/dist/forms/utils.d.ts

@@ -15,7 +15,7 @@ export type AutocompleteOptionType = OptionType & {
 export declare const isAutocompleteOptionType: (o: any) => o is AutocompleteOptionType;
 export declare const getEnumFromString: <T>(type: any, str: string | null) => T[keyof T] | null;
 export declare const currencyToReadableString: (n: number) => string;
-export declare const cleanArray: <T>(arrayObj: (Error | T | null | undefined)[] | null | undefined) => T[];
+export declare const cleanArray: <T>(arrayObj: (T | Error | null | undefined)[] | null | undefined) => T[];
 export declare const downloadFileViaUrl: (url: string, filename: string) => void;
 export declare const getReadableDate: (d: number) => string;
 export declare const getReadableDateTime: (d: number | string | Date, dateTimeFormatOptions?: Intl.DateTimeFormatOptions) => string;

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 export { default as EltyVuePlugin } from './vue.plugin';
 export { default as EltyTailwindPlugin } from './tailwind.plugin';
-export * from './routes';
 export * from './types';
 export * from './ElAccordion.vue';
 export { default as ElAccordion } from './ElAccordion.vue';
@@ -20,8 +19,6 @@ export * from './ElDropdown.vue';
 export { default as ElDropdown } from './ElDropdown.vue';
 export * from './ElFile.vue';
 export { default as ElFile } from './ElFile.vue';
-export * from './ElFooter.vue';
-export { default as ElFooter } from './ElFooter.vue';
 export * from './ElIcon.vue';
 export { default as ElIcon } from './ElIcon.vue';
 export * from './ElIconButton.vue';