@davincihealthcare/elty-design-system-vue 1.17.1 → 1.18.0

package/README.md

@@ -14,7 +14,7 @@ Then install required plugins and the design system package itself
 
 ```bash
 # using yarn (or any other package manager)
-yarn add -D @tailwindcss/forms @tailwindcss/typography
+yarn add -D tailwindcss postcss autoprefixer @tailwindcss/forms @tailwindcss/typography
 yarn add @davincihealthcare/elty-design-system-vue
 ```
 
@@ -22,25 +22,26 @@ yarn add @davincihealthcare/elty-design-system-vue
 
 in tailwind.config file
 
-```js
+```ts
+import {EltyTailwindPlugin, EltyTailwindPreset} from '@davincihealthcare/elty-design-system-vue'
 
 module.exports = {
   ...
   content: [..., './node_modules/@davincihealthcare/elty-design-system-vue/**/*.{tsx,js}'],
+  presets: [EltyTailwindPreset],
   plugins: [
     require('@tailwindcss/forms'),
     require('@tailwindcss/typography'),
-    require('@davincihealthcare/elty-design-system-vue').EltyTailwindPlugin
+    EltyTailwindPlugin
   ]
   ...
 }
 ```
 
-Note: content needs a new entry in the array, alongside other you may already have.
-
-Make sure to:
+Note: The Preset way of loading the css was introduced from version 1.18.0
 
-- do NOT to import the elty foundations which are already imported alongside this plugin.
+Note: content needs a new entry in the array, alongside other you may already have.
+You may also change the require with a neater
 
 in main.ts file
 
@@ -83,6 +84,10 @@ const onClick = () => {
 
 ## Tech stuff and instructions 🔥🔥
 
+- EltyTailwindPlugin contains some custom css to be applied on forms and so on.
+- EltyTailwindPreset contains the base style for the elty design system. Exported as a preset, and not as a plugin so that it can be easily overridden by the user application
+- EltyVuePlugin contains the vee-validate rules for the inputs
+
 As it has been set the following as `peer dependencies`
 
 - @tailwindcss/forms

package/dist/ElAccordion.vue.d.ts

@@ -10,10 +10,12 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
         semiboldText: string;
         check: boolean;
         leadingIcon: import('./ElIcon.vue').ElIconProps;
+        focused: boolean;
     }> & Omit<{
         readonly disabled: boolean;
         readonly text: string;
         readonly check: boolean;
+        readonly focused: boolean;
         readonly avatar?: import('./types').AvatarParameters | undefined;
         readonly semiboldText?: string | undefined;
         readonly leadingIcon?: import('./ElIcon.vue').ElIconProps | undefined;
@@ -43,7 +45,11 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
             type: import('vue').PropType<import('./ElIcon.vue').ElIconProps>;
             default: undefined;
         };
-    }>>, "disabled" | "text" | "avatar" | "semiboldText" | "check" | "leadingIcon">)[] | undefined;
+        focused: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+    }>>, "disabled" | "text" | "avatar" | "semiboldText" | "check" | "leadingIcon" | "focused">)[] | undefined;
 }>, {
     open: undefined;
     items: undefined;
@@ -61,10 +67,12 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
         semiboldText: string;
         check: boolean;
         leadingIcon: import('./ElIcon.vue').ElIconProps;
+        focused: boolean;
     }> & Omit<{
         readonly disabled: boolean;
         readonly text: string;
         readonly check: boolean;
+        readonly focused: boolean;
         readonly avatar?: import('./types').AvatarParameters | undefined;
         readonly semiboldText?: string | undefined;
         readonly leadingIcon?: import('./ElIcon.vue').ElIconProps | undefined;
@@ -94,7 +102,11 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
             type: import('vue').PropType<import('./ElIcon.vue').ElIconProps>;
             default: undefined;
         };
-    }>>, "disabled" | "text" | "avatar" | "semiboldText" | "check" | "leadingIcon">)[] | undefined;
+        focused: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+    }>>, "disabled" | "text" | "avatar" | "semiboldText" | "check" | "leadingIcon" | "focused">)[] | undefined;
 }>, {
     open: undefined;
     items: undefined;
@@ -111,10 +123,12 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
         semiboldText: string;
         check: boolean;
         leadingIcon: import('./ElIcon.vue').ElIconProps;
+        focused: boolean;
     }> & Omit<{
         readonly disabled: boolean;
         readonly text: string;
         readonly check: boolean;
+        readonly focused: boolean;
         readonly avatar?: import('./types').AvatarParameters | undefined;
         readonly semiboldText?: string | undefined;
         readonly leadingIcon?: import('./ElIcon.vue').ElIconProps | undefined;
@@ -144,7 +158,11 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
             type: import('vue').PropType<import('./ElIcon.vue').ElIconProps>;
             default: undefined;
         };
-    }>>, "disabled" | "text" | "avatar" | "semiboldText" | "check" | "leadingIcon">)[];
+        focused: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+    }>>, "disabled" | "text" | "avatar" | "semiboldText" | "check" | "leadingIcon" | "focused">)[];
 }, {}>, {
     default?(_: {}): any;
 }>;

package/dist/ElDropdown.vue.d.ts

@@ -1,47 +1,10 @@
+import { default as ElItem } from './ElItem.vue';
+
+type Item = {
+    onClick?: () => void;
+} & InstanceType<typeof ElItem>['$props'];
 declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    items: ({
-        onClick?: (() => void) | undefined;
-    } & Partial<{
-        disabled: boolean;
-        text: string;
-        avatar: import('./types').AvatarParameters;
-        semiboldText: string;
-        check: boolean;
-        leadingIcon: import('./ElIcon.vue').ElIconProps;
-    }> & Omit<{
-        readonly disabled: boolean;
-        readonly text: string;
-        readonly check: boolean;
-        readonly avatar?: import('./types').AvatarParameters | undefined;
-        readonly semiboldText?: string | undefined;
-        readonly leadingIcon?: import('./ElIcon.vue').ElIconProps | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{
-        disabled: {
-            type: import('vue').PropType<boolean>;
-            default: boolean;
-        };
-        text: {
-            type: import('vue').PropType<string>;
-            required: true;
-            default: string;
-        };
-        avatar: {
-            type: import('vue').PropType<import('./types').AvatarParameters>;
-            default: undefined;
-        };
-        semiboldText: {
-            type: import('vue').PropType<string>;
-            default: undefined;
-        };
-        check: {
-            type: import('vue').PropType<boolean>;
-            default: boolean;
-        };
-        leadingIcon: {
-            type: import('vue').PropType<import('./ElIcon.vue').ElIconProps>;
-            default: undefined;
-        };
-    }>>, "disabled" | "text" | "avatar" | "semiboldText" | "check" | "leadingIcon">)[];
+    items: Item[];
     title?: string | undefined;
     action?: Omit<Partial<{
         disabled: boolean;
@@ -129,53 +92,15 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     isOpen: undefined;
     minWidth: undefined;
     maxHeight: number;
-}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+}>, {
+    show: () => boolean;
+    hide: () => boolean;
+    toggle: () => boolean;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "click:action": () => void;
     "update:is-open": (isOpen: boolean) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    items: ({
-        onClick?: (() => void) | undefined;
-    } & Partial<{
-        disabled: boolean;
-        text: string;
-        avatar: import('./types').AvatarParameters;
-        semiboldText: string;
-        check: boolean;
-        leadingIcon: import('./ElIcon.vue').ElIconProps;
-    }> & Omit<{
-        readonly disabled: boolean;
-        readonly text: string;
-        readonly check: boolean;
-        readonly avatar?: import('./types').AvatarParameters | undefined;
-        readonly semiboldText?: string | undefined;
-        readonly leadingIcon?: import('./ElIcon.vue').ElIconProps | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{
-        disabled: {
-            type: import('vue').PropType<boolean>;
-            default: boolean;
-        };
-        text: {
-            type: import('vue').PropType<string>;
-            required: true;
-            default: string;
-        };
-        avatar: {
-            type: import('vue').PropType<import('./types').AvatarParameters>;
-            default: undefined;
-        };
-        semiboldText: {
-            type: import('vue').PropType<string>;
-            default: undefined;
-        };
-        check: {
-            type: import('vue').PropType<boolean>;
-            default: boolean;
-        };
-        leadingIcon: {
-            type: import('vue').PropType<import('./ElIcon.vue').ElIconProps>;
-            default: undefined;
-        };
-    }>>, "disabled" | "text" | "avatar" | "semiboldText" | "check" | "leadingIcon">)[];
+    items: Item[];
     title?: string | undefined;
     action?: Omit<Partial<{
         disabled: boolean;

package/dist/ElItem.vue.d.ts

@@ -8,6 +8,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     leadingIcon?: ElIconProps | undefined;
     avatar?: AvatarParameters | undefined;
     disabled?: boolean | undefined;
+    focused?: boolean | undefined;
 }>, {
     text: string;
     semiboldText: undefined;
@@ -15,6 +16,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     leadingIcon: undefined;
     avatar: undefined;
     disabled: boolean;
+    focused: boolean;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     text: string;
     semiboldText?: string | undefined;
@@ -22,6 +24,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     leadingIcon?: ElIconProps | undefined;
     avatar?: AvatarParameters | undefined;
     disabled?: boolean | undefined;
+    focused?: boolean | undefined;
 }>, {
     text: string;
     semiboldText: undefined;
@@ -29,6 +32,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     leadingIcon: undefined;
     avatar: undefined;
     disabled: boolean;
+    focused: boolean;
 }>>>, {
     disabled: boolean;
     text: string;
@@ -36,6 +40,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     semiboldText: string;
     check: boolean;
     leadingIcon: ElIconProps;
+    focused: boolean;
 }, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 
 export { default as EltyVuePlugin } from './vue.plugin';
 export { default as EltyTailwindPlugin } from './tailwind.plugin';
+export { default as EltyTailwindPreset } from './preset';
 export * from './types';
 export * from './ElAccordion.vue';
 export { default as ElAccordion } from './ElAccordion.vue';