@solfacil/girassol 0.17.1 → 0.19.0

package/dist/types/index.d.ts

@@ -27,6 +27,7 @@ import { SolSearch } from './components/search';
 import { SolDatePicker } from './components/date-picker';
 import { SolCollapsible } from './components/collapsible';
 import { SolFileUpload } from './components/file-upload';
+import { SolBreadcrumb } from './components/breadcrumb';
 import 'virtual:windi-base.css';
 import 'virtual:windi-components.css';
 import 'virtual:windi-utilities.css';
@@ -375,7 +376,7 @@ export declare const components: {
             type: import("vue").PropType<Partial<import("vee-validate").FieldOptions<string>>>;
         };
         resize: {
-            type: import("vue").PropType<"none" | "both" | "horizontal" | "vertical">;
+            type: import("vue").PropType<"none" | "vertical" | "both" | "horizontal">;
         } & {
             default: string;
         };
@@ -430,7 +431,7 @@ export declare const components: {
             type: import("vue").PropType<Partial<import("vee-validate").FieldOptions<string>>>;
         };
         resize: {
-            type: import("vue").PropType<"none" | "both" | "horizontal" | "vertical">;
+            type: import("vue").PropType<"none" | "vertical" | "both" | "horizontal">;
         } & {
             default: string;
         };
@@ -439,7 +440,7 @@ export declare const components: {
     }, {
         error: string | null;
         size: "small" | "medium";
-        resize: "none" | "both" | "horizontal" | "vertical";
+        resize: "none" | "vertical" | "both" | "horizontal";
     }>;
     SolInputText: {
         new (...args: any[]): {
@@ -1590,7 +1591,7 @@ export declare const components: {
             type: import("vue").PropType<boolean>;
         };
         textDirection: {
-            type: import("vue").PropType<"right" | "left">;
+            type: import("vue").PropType<"left" | "right">;
         } & {
             default: string;
         };
@@ -1629,7 +1630,7 @@ export declare const components: {
             type: import("vue").PropType<boolean>;
         };
         textDirection: {
-            type: import("vue").PropType<"right" | "left">;
+            type: import("vue").PropType<"left" | "right">;
         } & {
             default: string;
         };
@@ -1642,7 +1643,7 @@ export declare const components: {
         onChange?: ((value: string | boolean) => any) | undefined;
         "onUpdate:checked"?: ((value: boolean) => any) | undefined;
     }, {
-        textDirection: "right" | "left";
+        textDirection: "left" | "right";
         stretchLabel: boolean;
     }>;
     SolSelect: {
@@ -3287,7 +3288,7 @@ export declare const components: {
             $data: {};
             $props: Partial<{
                 label: string;
-                position: ("bottom" | "top" | "center") | ("right" | "left");
+                position: ("center" | "bottom" | "top") | ("left" | "right");
             }> & Omit<Readonly<import("vue").ExtractPropTypes<{
                 id: {
                     type: import("vue").PropType<string>;
@@ -3299,7 +3300,7 @@ export declare const components: {
                     default: string;
                 };
                 position: {
-                    type: import("vue").PropType<("bottom" | "top" | "center") | ("right" | "left")>;
+                    type: import("vue").PropType<("center" | "bottom" | "top") | ("left" | "right")>;
                 } & {
                     default: string;
                 };
@@ -3328,13 +3329,13 @@ export declare const components: {
                     default: string;
                 };
                 position: {
-                    type: import("vue").PropType<("bottom" | "top" | "center") | ("right" | "left")>;
+                    type: import("vue").PropType<("center" | "bottom" | "top") | ("left" | "right")>;
                 } & {
                     default: string;
                 };
             }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
                 label: string;
-                position: ("bottom" | "top" | "center") | ("right" | "left");
+                position: ("center" | "bottom" | "top") | ("left" | "right");
             }, {}, string> & {
                 beforeCreate?: ((() => void) | (() => void)[]) | undefined;
                 created?: ((() => void) | (() => void)[]) | undefined;
@@ -3366,7 +3367,7 @@ export declare const components: {
                 default: string;
             };
             position: {
-                type: import("vue").PropType<("bottom" | "top" | "center") | ("right" | "left")>;
+                type: import("vue").PropType<("center" | "bottom" | "top") | ("left" | "right")>;
             } & {
                 default: string;
             };
@@ -3385,13 +3386,13 @@ export declare const components: {
             default: string;
         };
         position: {
-            type: import("vue").PropType<("bottom" | "top" | "center") | ("right" | "left")>;
+            type: import("vue").PropType<("center" | "bottom" | "top") | ("left" | "right")>;
         } & {
             default: string;
         };
     }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
         label: string;
-        position: ("bottom" | "top" | "center") | ("right" | "left");
+        position: ("center" | "bottom" | "top") | ("left" | "right");
     }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
         $slots: {
             trigger: (_: {
@@ -4675,7 +4676,7 @@ export declare const components: {
             $: import("vue").ComponentInternalInstance;
             $data: {};
             $props: Partial<{
-                align: "right" | "left";
+                align: "left" | "right";
             }> & Omit<Readonly<import("vue").ExtractPropTypes<{
                 id: {
                     type: import("vue").PropType<string>;
@@ -4688,7 +4689,7 @@ export declare const components: {
                     type: import("vue").PropType<string>;
                 };
                 align: {
-                    type: import("vue").PropType<"right" | "left">;
+                    type: import("vue").PropType<"left" | "right">;
                 } & {
                     default: string;
                 };
@@ -4721,7 +4722,7 @@ export declare const components: {
                     type: import("vue").PropType<string>;
                 };
                 align: {
-                    type: import("vue").PropType<"right" | "left">;
+                    type: import("vue").PropType<"left" | "right">;
                 } & {
                     default: string;
                 };
@@ -4729,7 +4730,7 @@ export declare const components: {
                     type: import("vue").PropType<string>;
                 };
             }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-                align: "right" | "left";
+                align: "left" | "right";
             }, {}, string> & {
                 beforeCreate?: ((() => void) | (() => void)[]) | undefined;
                 created?: ((() => void) | (() => void)[]) | undefined;
@@ -4762,7 +4763,7 @@ export declare const components: {
                 type: import("vue").PropType<string>;
             };
             align: {
-                type: import("vue").PropType<"right" | "left">;
+                type: import("vue").PropType<"left" | "right">;
             } & {
                 default: string;
             };
@@ -4785,7 +4786,7 @@ export declare const components: {
             type: import("vue").PropType<string>;
         };
         align: {
-            type: import("vue").PropType<"right" | "left">;
+            type: import("vue").PropType<"left" | "right">;
         } & {
             default: string;
         };
@@ -4793,7 +4794,7 @@ export declare const components: {
             type: import("vue").PropType<string>;
         };
     }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-        align: "right" | "left";
+        align: "left" | "right";
     }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
         $slots: {
             label: (_: {}) => any;
@@ -4948,6 +4949,50 @@ export declare const components: {
         downloadMenu: import("./components/file-upload/types").DownloadMenu[];
     }>;
     SolMenuItemSeparator: any;
+    SolBreadcrumb: import("vue").DefineComponent<{
+        id: {
+            type: import("vue").PropType<string>;
+        };
+        items: {
+            type: import("vue").PropType<import("./components/breadcrumb/types").Item[]>;
+        } & {
+            default: () => {
+                text: string;
+                href: string;
+            }[];
+        };
+        linkTag: {
+            type: import("vue").PropType<"a" | "router-link" | "nuxt-link">;
+        } & {
+            default: string;
+        };
+        gtmId: {
+            type: import("vue").PropType<string>;
+        };
+    }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        id: {
+            type: import("vue").PropType<string>;
+        };
+        items: {
+            type: import("vue").PropType<import("./components/breadcrumb/types").Item[]>;
+        } & {
+            default: () => {
+                text: string;
+                href: string;
+            }[];
+        };
+        linkTag: {
+            type: import("vue").PropType<"a" | "router-link" | "nuxt-link">;
+        } & {
+            default: string;
+        };
+        gtmId: {
+            type: import("vue").PropType<string>;
+        };
+    }>>, {
+        items: import("./components/breadcrumb/types").Item[];
+        linkTag: "a" | "router-link" | "nuxt-link";
+    }>;
 };
 export declare function install(App: App): void;
-export { SolButton, SolButtonDestructive, SolInputTextarea, SolInputText, SolInputTextPassword, SolRadio, SolRadioGroup, SolCheckbox, SolCheckboxGroup, SolSwitch, SolSelect, SolRemovableChip, SolSelectableChip, SolTag, SolAlert, SolAccordion, SolList, SolTabs, SolMenu, SolMenuItem, SolMenuItemLink, SolMenuNavigationLinks, SolModal, SolOnboarding, SolPagination, SolEmptyState, SolSearch, SolDatePicker, SolCollapsible, SolSteps, SolTextValue, SolFileUpload, SolMenuItemSeparator, };
+export { SolButton, SolButtonDestructive, SolInputTextarea, SolInputText, SolInputTextPassword, SolRadio, SolRadioGroup, SolCheckbox, SolCheckboxGroup, SolSwitch, SolSelect, SolRemovableChip, SolSelectableChip, SolTag, SolAlert, SolAccordion, SolList, SolTabs, SolMenu, SolMenuItem, SolMenuItemLink, SolMenuNavigationLinks, SolModal, SolOnboarding, SolPagination, SolEmptyState, SolSearch, SolDatePicker, SolCollapsible, SolSteps, SolTextValue, SolFileUpload, SolMenuItemSeparator, SolBreadcrumb, };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solfacil/girassol",
   "description": "Girassol design system",
-  "version": "0.17.1",
+  "version": "0.19.0",
   "license": "MIT",
   "authors": [
     {
@@ -37,10 +37,10 @@
   },
   "types": "./dist/types/index.d.ts",
   "scripts": {
-    "typecheck": "vue-tsc --noEmit",
+    "typecheck": "vue-tsc -p tsconfig.app.json --noEmit",
     "dev": "vite --port 3333 --host",
     "build:lib": "vue-tsc --noEmit && vite build",
-    "build:lib:ts": "vite build && vue-tsc --emitDeclarationOnly && mv dist/src dist/types",
+    "build:lib:ts": "vite build && vue-tsc -p tsconfig.app.json --emitDeclarationOnly && mv dist/src dist/types",
     "preview": "vite preview",
     "lint": "eslint src/ --resolve-plugins-relative-to .",
     "lint:fix": "eslint src/ --fix --resolve-plugins-relative-to .",
@@ -60,49 +60,50 @@
     "semantic-release": "semantic-release"
   },
   "dependencies": {
-    "@vuepic/vue-datepicker": "^3.6.1",
+    "@vuepic/vue-datepicker": "^3.6.3",
     "@vueuse/core": "^9.6.0",
     "gluegun": "latest",
-    "maska": "^1.5.1",
+    "maska": "^1.5.2",
     "vee-validate": "^4.7.3",
     "vue": "^3.2.45"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.33.0",
+    "@antfu/eslint-config": "^0.34.0",
     "@babel/core": "^7.20.5",
     "@babel/preset-env": "^7.20.2",
     "@commitlint/cli": "^17.3.0",
     "@commitlint/config-conventional": "^17.3.0",
-    "@iconify/json": "^2.1.146",
+    "@iconify/json": "^2.1.151",
     "@semantic-release/changelog": "^6.0.2",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/npm": "^9.0.1",
     "@semantic-release/release-notes-generator": "^10.0.3",
-    "@storybook/addon-a11y": "^6.5.13",
-    "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
+    "@storybook/addon-a11y": "^6.5.14",
+    "@storybook/addon-actions": "^6.5.14",
+    "@storybook/addon-essentials": "^6.5.14",
+    "@storybook/addon-links": "^6.5.14",
     "@storybook/builder-vite": "^0.2.5",
-    "@storybook/theming": "^6.5.13",
-    "@storybook/vue3": "^6.5.13",
+    "@storybook/theming": "^6.5.14",
+    "@storybook/vue3": "^6.5.14",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/user-event": "^14.4.3",
     "@testing-library/vue": "^6.6.1",
     "@types/jest-axe": "^3.5.5",
     "@types/node": "18.11.9",
-    "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.45.0",
+    "@types/react": "^16.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.46.1",
+    "@typescript-eslint/parser": "^5.46.1",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vitest/coverage-c8": "^0.25.3",
     "@vitest/ui": "^0.25.3",
     "babel-loader": "^9.1.0",
     "c8": "^7.12.0",
     "cli-spinner": "^0.2.10",
-    "commitizen": "^4.2.5",
+    "commitizen": "^4.2.6",
     "conventional-changelog-conventionalcommits": "^5.0.0",
     "copyfiles": "^2.4.1",
     "critters": "^0.0.16",
-    "eslint": "^8.28.0",
+    "eslint": "^8.29.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-prettier": "^4.2.1",
@@ -114,19 +115,19 @@
     "sass": "^1.56.1",
     "semantic-release": "^19.0.5",
     "storybook-addon-designs": "^6.3.1",
-    "stylelint": "^14.15.0",
+    "stylelint": "^14.16.0",
     "stylelint-config-prettier": "^9.0.4",
     "stylelint-config-property-sort-order-smacss": "^9.0.0",
     "stylelint-order": "^5.0.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.3",
-    "unplugin-icons": "^0.14.14",
+    "typescript": "^4.9.4",
+    "unplugin-icons": "^0.14.15",
     "vite": "^3.2.4",
-    "vite-plugin-inspect": "^0.7.9",
-    "vite-plugin-windicss": "^1.8.8",
+    "vite-plugin-inspect": "^0.7.10",
+    "vite-plugin-windicss": "^1.8.10",
     "vitest": "^0.25.3",
     "vue-loader": "^17.0.1",
-    "vue-tsc": "^1.0.11",
+    "vue-tsc": "^1.0.13",
     "windicss": "^3.5.6"
   },
   "resolutions": {

package/theme/safelist.ts

@@ -1,6 +1,8 @@
 type Data = {
   colors: Record<string, any>
   spacing: Record<string, any>
+  effects: Record<string, any>
+  borders: Record<string, any>
 }
 
 type Args = {
@@ -10,18 +12,26 @@ type Args = {
 
 export function safelist({ activeSafeList = true, data }: Args): string[] {
   if (activeSafeList) {
-    const colors = data.colors ? safelistElementColors(safelistColors(data.colors)) : []
+    const colors = data.colors
+      ? safelistElementColors(safelistColors(data.colors))
+      : []
     const spacing = data.spacing ? safelistSpacing(data.spacing) : []
 
-    const gaps = range(20).map(i => `gap-${i}`)
-    const gridRows = range(14).map(i => `grid-rows-${i}`)
-    const gridCols = range(14).map(i => `grid-cols-${i}`)
-    const rowsStart = range(14).map(i => `row-start-${i}`)
-    const colsStart = range(14).map(i => `col-start-${i}`)
-    const rowsSpan = range(14).map(i => `row-span-${i}`)
-    const colsSpan = range(14).map(i => `col-span-${i}`)
+    const effects = safelistEffects(data.effects)
 
-    return [
+    const gaps = range(20).map((i) => `gap-${i}`)
+    const gridRows = range(14).map((i) => `grid-rows-${i}`)
+    const gridCols = range(14).map((i) => `grid-cols-${i}`)
+    const rowsStart = range(14).map((i) => `row-start-${i}`)
+    const colsStart = range(14).map((i) => `col-start-${i}`)
+    const rowsSpan = range(14).map((i) => `row-span-${i}`)
+    const colsSpan = range(14).map((i) => `col-span-${i}`)
+
+    const maxLines = range(10).map((i) => `max-lines-${i}`)
+
+    const borders = safelistBorders(data.borders.borderRadius, data.borders.borderWidth)
+
+    return  [
       'debug',
       'debug-all',
       ...colors,
@@ -33,10 +43,14 @@ export function safelist({ activeSafeList = true, data }: Args): string[] {
       ...colsStart,
       ...rowsSpan,
       ...colsSpan,
+      ...effects,
+      ...maxLines,
+      ...borders,
+      ...safelistTypography(),
+      ...safelistIconSizes(),
     ]
   }
 
-
   return []
 }
 
@@ -63,9 +77,22 @@ export function safelistColors(colors: Data['colors']) {
 }
 
 export function safelistElementColors(colorsNames: string[]) {
-  const elements = ['text', 'bg', 'outline', 'fill', 'stroke', 'border', 'text-decoration-color', 'text-stroke-color']
+  const elements = [
+    'text',
+    'bg',
+    'outline',
+    'fill',
+    'stroke',
+    'border',
+    'shadow',
+    'text-decoration-color',
+    'text-stroke-color',
+  ]
+
   const elementColors: string[] = []
 
+  elements.forEach((element) => elementColors.push(`${element}-transparent`))
+
   elements.forEach((element: string) => {
     colorsNames.forEach((color: string) => {
       elementColors.push(`${element}-${color}`)
@@ -75,19 +102,80 @@ export function safelistElementColors(colorsNames: string[]) {
   return elementColors
 }
 
+export function safelistBorders(borderRadius: Data['spacing'], borderWidth: Data['spacing']): string[] {
+  const borderAxis = [
+    'border',
+    'border-a',
+    'border-x',
+    'border-y',
+    'border-l',
+    'border-r',
+    'border-t',
+    'border-b',
+  ]
+  const borderWidthAxis = [
+    'rounded',
+    'rounded-x',
+    'rounded-y',
+    'rounded-l',
+    'rounded-r',
+    'rounded-t',
+    'rounded-b',
+  ]
+
+  const elementsBorder: string[] = []
+
+
+  Object.keys(borderWidth).forEach((element: string) => {
+    borderAxis.forEach((axis) => {
+      elementsBorder.push(`${axis}-${element}`)
+    })
+  })
+  
+  Object.keys(borderRadius).forEach((element: string) => {
+    borderWidthAxis.forEach((axis) => {
+      elementsBorder.push(`${axis}-${element}`)
+    })
+  })
+
+  return elementsBorder
+}
 
 export function safelistSpacing(spacing: Data['spacing']): string[] {
   const spacingTokenNames = Object.keys(spacing)
   const paddings = ['p', 'px', 'py', 'pl', 'pr', 'pt', 'pb']
   const margins = ['m', 'mx', 'my', 'ml', 'mr', 'mt', 'mb']
 
-  const typos = ['text', 'tracking', 'decoration', 'underline-offset', 'indent', 'text-stroke']
+  const typos = [
+    'text',
+    'tracking',
+    'decoration',
+    'underline-offset',
+    'indent',
+    'text-stroke',
+  ]
   const svg = ['stroke']
-  const border = ['border-a', 'border-x', 'border-y', 'border-l', 'border-r', 'border-t', 'border-b']
-
-  const elements = [...paddings, ...margins, ...typos, ...svg, ...border]
-  
-  const elementSpacing: string[] = []
+  const border = [
+    'border-a',
+    'border-x',
+    'border-y',
+    'border-l',
+    'border-r',
+    'border-t',
+    'border-b',
+  ]
+
+  const staticTokens = ['w-full', 'h-full', 'w-fit-content']
+
+  const elements = [
+    ...paddings,
+    ...margins,
+    ...typos,
+    ...svg,
+    ...border,
+  ]
+
+  const elementSpacing: string[] = staticTokens
 
   elements.forEach((element: string) => {
     spacingTokenNames.forEach((space: string) => {
@@ -95,12 +183,60 @@ export function safelistSpacing(spacing: Data['spacing']): string[] {
     })
   })
 
-  margins.forEach(margin =>  elementSpacing.push(`${margin}-auto`))
-  paddings.forEach(padding =>  elementSpacing.push(`${padding}-auto`))
+  margins.forEach((margin) => elementSpacing.push(`${margin}-auto`))
+  paddings.forEach((padding) => elementSpacing.push(`${padding}-auto`))
 
   return elementSpacing
 }
 
 export function range(size: number, startAt = 1) {
-  return Array.from(Array(size).keys()).map(i => i + startAt)
-}
+  return Array.from(Array(size).keys()).map((i) => i + startAt)
+}
+
+export function safelistEffects(effects: Data['effects']) {
+  const opacitiesPrefix = ['text', 'bg', 'shadow']
+
+  const opacities = Object.keys(effects.opacity).flatMap((opacity) =>
+    opacitiesPrefix.map((prefix) => `${prefix}-${opacity}`),
+  )
+
+  const shadows = Object.keys(effects.boxShadow).flatMap(
+    (shadow) => `shadow-${shadow}`,
+  )
+
+  return [...opacities, ...shadows]
+}
+
+export function safelistIconSizes() {
+  return [
+    'icon-size-small',
+    'icon-size-medium',
+    'icon-size-large',
+    'icon-size-x-large',
+    'icon-size-giga',
+  ]
+}
+
+export function safelistTypography() {
+  return [
+    'fonts-display-large',
+    'fonts-display-medium',
+    'fonts-display-small',
+    'fonts-heading-h1',
+    'fonts-heading-h2',
+    'fonts-heading-h3',
+    'fonts-heading-h4',
+    'fonts-body-x-large-regular',
+    'fonts-body-x-large-bold',
+    'fonts-body-large-regular',
+    'fonts-body-large-bold',
+    'fonts-body-medium-regular',
+    'fonts-body-medium-bold',
+    'fonts-body-small-regular',
+    'fonts-body-small-bold',
+    'fonts-link-inline-large',
+    'fonts-link-inline-medium',
+    'fonts-link-inline-small',
+    'fonts-overline-small',
+  ]
+}

package/dist/cli/src/cli.d.ts

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

package/dist/cli/src/commands/create:component.d.ts

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

package/dist/cli/src/commands/generate:plugin.d.ts

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

package/dist/cli/src/commands/generate:types.d.ts

@@ -1,7 +0,0 @@
-import type { GluegunToolbox } from 'gluegun';
-declare const _default: {
-    name: string;
-    description: string;
-    run: (toolbox: GluegunToolbox) => Promise<void>;
-};
-export default _default;

package/dist/cli/src/commands/girassol-cli.d.ts

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

package/dist/cli/src/extensions/cli-extension.d.ts

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

package/dist/theme/solfacil/borders.d.ts

@@ -1,18 +0,0 @@
-declare const _default: {
-    borderRadius: {
-        none: number;
-        sm: string;
-        md: string;
-        lg: string;
-        full: string;
-        half: string;
-    };
-    borderWidth: {
-        none: number;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
-};
-export default _default;