@wikicasa-dev/components 2.1.4-alpha.2 → 2.1.4-alpha.21

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@wikicasa-dev/components",
-  "version": "2.1.4-alpha.2",
+  "version": "2.1.4-alpha.21",
   "description": "Wikicasa frontend components",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "plugins"
   ],
   "sideEffects": [
     "**/*.css"
@@ -28,7 +29,9 @@
     "./chart/*": {
       "import": "./dist/chart/*.js",
       "types": "./dist/chart/*.d.ts"
-    }
+    },
+    "./plugins/buttonPlugin": "./plugins/buttonPlugin.ts",
+    "./tailwind.config": "./dist/tailwind.config.js"
   },
   "repository": {
     "type": "git",
@@ -42,45 +45,35 @@
   "homepage": "https://bitbucket.org/wikicasa/wikicasa-fe#readme",
   "dependencies": {
     "@vuepic/vue-datepicker": "^11.0.2",
-    "caniuse-lite": "^1.0.30001722",
-    "chart.js": "^4.4.9",
+    "caniuse-lite": "^1.0.30001726",
+    "chart.js": "^4.5.0",
     "chartjs-adapter-date-fns": "^3.0.0",
     "date-fns": "^4.1.0",
-    "reka-ui": "^2.3.1",
-    "swiper": "^11.2.8",
-    "vue": "^3.5.13",
-    "vue-chartjs": "^5.3.2",
-    "vue-router": "^4.5.0"
+    "reka-ui": "^2.3.2",
+    "swiper": "^11.2.10",
+    "vue-chartjs": "^5.3.2"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.27.5",
+    "@babel/eslint-parser": "^7.28.0",
     "@histoire/plugin-vue": "^1.0.0-alpha.2",
-    "@types/node": "^24.0.1",
-    "@vitejs/plugin-vue": "^5.2.4",
-    "@vue/eslint-config-prettier": "^10.2.0",
-    "@vue/eslint-config-typescript": "^14.5.0",
-    "@wikicasa-dev/svg-icons": "1.2.12",
+    "@wikicasa-dev/svg-icons": "1.2.15-alpha.1",
     "@wikicasa-dev/tailwind-plugins": "^0.0.3",
-    "@wikicasa-dev/types": "2.2.0",
-    "@wikicasa-dev/utilities": "1.1.21",
-    "@wikicasa-dev/vue-composables": "0.0.23",
+    "@wikicasa-dev/types": "2.3.2-alpha.3",
+    "@wikicasa-dev/utilities": "1.1.22-alpha.4",
+    "@wikicasa-dev/vue-composables": "0.0.24-alpha.5",
     "ajv": "^8.17.1",
     "autoprefixer": "^10.4.21",
-    "eslint": "^9.28",
-    "eslint-plugin-vue": "^10.2.0",
-    "glob": "^11.0.2",
     "histoire": "^1.0.0-alpha.2",
-    "postcss": "^8.5.5",
-    "prettier": "^3.5.3",
-    "prettier-plugin-tailwindcss": "^0.6.12",
+    "postcss": "^8.5.6",
     "rollup-plugin-visualizer": "^6.0.3",
-    "tailwindcss": "^3.4.15",
-    "typescript": "^5.8.3",
-    "vite": "^6.3.5",
-    "vite-plugin-dts": "^4.5.4",
+    "tailwindcss": "3.4.15",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "vite-plugin-vue-devtools": "^7.7.6",
-    "vue-tsc": "^2.2.10"
+    "vue": "^3.5.13",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.13"
   },
   "readme": "ERROR: No README data found!",
   "scripts": {

package/plugins/buttonPlugin.ts

@@ -0,0 +1,290 @@
+import plugin from "tailwindcss/plugin";
+
+const colors = {
+  //New colors
+  primary: { value: "#F20282", hover: "#E30C79", outlineHover: "#FFF8FB" },
+  secondary: { value: "#2b5dff", hover: "#244FD9" },
+  lightgray: { value: "#C1C8D5", hover: "" },
+  ghost: { value: "#FAFBFF", hover: "" },
+
+  //Old colors
+  darkPrimary: { value: "#2A3761", hover: "" },
+  lavender: { value: "#E9EFFE", hover: "" },
+  cultured: { value: "#F4F7FF", hover: "" },
+  carbon: { value: "#3C474D", hover: "" },
+  gray: { value: "#6D7687", hover: "" },
+  black: { value: "#222222", hover: "" },
+  warning: { value: "#FFD167", hover: "" },
+  white: { value: "#FFF", hover: "" },
+  danger: { value: "#FA4F64", hover: "" },
+} as const;
+
+export const buttonPlugin = plugin(({ addComponents, theme }) => {
+  addComponents({
+    ".btn": {
+      "--btn-px": "25px",
+      "--btn-py": "11px",
+      "--btn-bg-color": "transparent",
+      "--btn-text-color": colors.black.value,
+      "--btn-border-color": "unset",
+      "--btn-border-width": "0",
+      "--btn-border-radius": "24px",
+      "--btn-border-style": "solid",
+      "--btn-height": "40px",
+      "--btn-width": "auto",
+      "--btn-font-size": theme("fontSize.16"),
+      "--btn-transition":
+        "color, background-color cubic-bezier(0.4, 0, 0.2, 1) 150ms",
+      "--btn-font-weight": `${theme("fontWeight.semibold")}`,
+      display: "inline-flex",
+      "align-items": "center",
+      "justify-content": "center",
+      "font-size": "var(--btn-font-size)",
+      "font-weight": "var(--btn-font-weight)",
+      "white-space": "nowrap",
+      border:
+        "var(--btn-border-width) var(--btn-border-color) var(--btn-border-style)",
+      "border-radius": "var(--btn-border-radius)",
+      cursor: "pointer",
+      height: "var(--btn-height)",
+      width: "var(--btn-width)",
+      "background-color": "var(--btn-bg-color)",
+      color: "var(--btn-text-color)",
+      padding: "var(--btn-py) var(--btn-px)",
+      transition: "var(--btn-transition)",
+      "line-height": "1",
+      "-webkit-tap-highlight-color": "transparent",
+      "&.btn-lg": {
+        "--btn-height": "48px",
+        "--btn-px": "24px",
+        "--btn-py": "12px",
+      },
+      "&.btn-sm": {
+        "--btn-px": "24px",
+        "--btn-py": "8px",
+        "--btn-height": "40px",
+      },
+      "&.btn-rounded": {
+        "--btn-px": "0",
+        "--btn-py": "0",
+      },
+      "&.btn-outline": {
+        "--btn-border-width": "1px",
+        "--btn-bg-color": colors.white.value,
+      },
+      "&.btn-primary": {
+        ...createBtn(
+          {
+            bgColor: colors.primary.value,
+            textColor: colors.white.value,
+            hoverBgColor: colors.primary.hover,
+            hoverDisabledBgColor: colors.primary.value,
+          },
+          {
+            mainColor: colors.white.hover,
+            textColor: colors.primary.value,
+            hoverBgColor: colors.primary.outlineHover,
+          },
+        ),
+        "text-transform": "uppercase",
+      },
+      "&.btn-secondary": createBtn(
+        {
+          bgColor: colors.secondary.value,
+          textColor: colors.white.value,
+          hoverBgColor: colors.secondary.hover,
+          hoverDisabledBgColor: colors.secondary.value,
+        },
+        {
+          mainColor: colors.secondary.value,
+          textColor: colors.secondary.value,
+        },
+      ),
+      "&.btn-ternary": {
+        ...createBtn({
+          bgColor: colors.white.value,
+          textColor: colors.secondary.value,
+          hoverBgColor: colors.white.value,
+          hoverDisabledBgColor: colors.secondary.value,
+          hoverTextColor: colors.secondary.hover,
+        }),
+        "--btn-border-color": colors.lightgray.value,
+        "--btn-border-width": "1px",
+        "--btn-border-radius": "24px",
+      },
+      "&.btn-quaternary": {
+        "--btn-px": "0",
+        "--btn-py": "0",
+        "--btn-text-color": colors.secondary.value,
+        "--btn-height": "auto",
+        "&:hover": {
+          "text-decoration": "underline",
+          "--btn-text-color": colors.secondary.hover,
+        },
+        "&:disabled": {
+          "--btn-bg-color": "transparent",
+          "--btn-text-color": colors.lightgray.value,
+        },
+      },
+      "&.btn-single-selection": {
+        "--btn-px": "16px",
+        "--btn-py": "8px",
+        "--btn-border-radius": theme("borderRadius.2xs"),
+        "--btn-border-color": colors.lightgray.value,
+        "--btn-border-width": "1px",
+        "--btn-font-weight": theme("fontWeight.regular"),
+        "&:hover": {
+          "--btn-border-color": colors.secondary.value,
+        },
+        "&:active,&.active,&[data-active='true']": {
+          "--btn-bg-color": colors.ghost.value,
+          "--btn-text-color": colors.secondary.value,
+          "--btn-border-color": colors.secondary.value,
+        },
+      },
+    },
+    //OLD style. Kept for retro-compatibility
+    ".btn-light": createBtn({
+      textColor: colors.primary.value,
+      bgColor: colors.white.value,
+      hoverTextColor: colors.primary.value,
+      hoverBgColor: "#FAFAFA",
+      hoverDisabledBgColor: colors.white.value,
+    }),
+    ".btn-warning": createBtn({
+      bgColor: colors.warning.value,
+      textColor: "#2A3761",
+      hoverBgColor: "#F2C761",
+      hoverDisabledBgColor: colors.warning.value,
+    }),
+    ".btn-danger": createBtn(
+      {
+        bgColor: colors.danger.value,
+        textColor: colors.white.value,
+        hoverBgColor: "#E0485A",
+        hoverDisabledBgColor: colors.danger.value,
+      },
+      {
+        mainColor: colors.danger.value,
+        textColor: colors.danger.value,
+      },
+    ),
+    ".btn-multi-selection": {
+      "--btn-py": "10px",
+      "--btn-height": "40px",
+      "font-weight": theme("fontWeight.regular"),
+      "--btn-border-radius": theme("borderRadius.xs"),
+      "--btn-border-color": "#EAEFFD",
+      "--btn-border-width": "1px",
+      "white-space": "normal",
+      ...createBtn({
+        textColor: colors.black.value,
+        bgColor: "#F5F7FA",
+        hoverBgColor: colors.lavender.value,
+        hoverDisabledBgColor: colors.white.value,
+        hoverBorderColor: "#385CF6",
+      }),
+    },
+
+    ".btn-facile": {
+      "--btn-facile-color": "#FF6600",
+      "--btn-facile-hover-color": "#b34700",
+      ...createBtn({
+        bgColor: "var(--btn-facile-color)",
+        textColor: colors.white.value,
+        hoverBgColor: "var(--btn-facile-hover-color)",
+        hoverTextColor: colors.white.value,
+        hoverDisabledBgColor: "var(--btn-facile-color)",
+      }),
+    },
+    ".btn-show-more": {
+      "--btn-border-radius": "0",
+      "--btn-border-color": colors.white.value,
+      ...createBtn({
+        textColor: "#2B5DFF",
+        bgColor: colors.white.value,
+        hoverTextColor: "#3646B3",
+        hoverBgColor: colors.white.value,
+        hoverDisabledBgColor: colors.white.value,
+      }),
+    },
+    ".btn-transparent": {
+      "--border-color": "transparent",
+      "--btn-px": "0",
+      "--btn-py": "0",
+      "&:hover": {
+        "--btn-bg-color": "transparent",
+        "--border-color": "transparent",
+      },
+    },
+  });
+});
+
+type BtnAttributes = {
+  bgColor: string;
+  textColor: string;
+  hoverBgColor: string;
+  hoverTextColor?: string;
+  /* The border color will be applied to desktop mode */
+  hoverBorderColor?: string;
+  activeBorderColor?: string;
+  activeBgColor?: string;
+  activeTextColor?: string;
+  hoverDisabledBgColor: string;
+};
+type BtnOutlineVariantAttributes = {
+  /* If present, it will be used to set the color to borders, text and background */
+  mainColor?: string;
+  borderColor?: string;
+  textColor?: string;
+  /* The hover bg color will be activated only from tablet mode on */
+  hoverBgColor?: string;
+  hoverDisabledBgColor?: string;
+  /* The hover text color will be activated only from tablet mode on */
+  hoverTextColor?: string;
+  activeBgColor?: string;
+  activeTextColor?: string;
+};
+
+const createBtn = (
+  btnProps: BtnAttributes,
+  btnOutlineProps?: BtnOutlineVariantAttributes,
+): any => ({
+  "--btn-bg-color": btnProps.bgColor,
+  "--btn-text-color": btnProps.textColor,
+  "&:disabled": {
+    cursor: "not-allowed",
+  },
+  "&:hover:not(:disabled)": {
+    "--btn-text-color": btnProps.hoverTextColor,
+    "--btn-bg-color": btnProps.hoverBgColor,
+  },
+  ...(btnOutlineProps
+    ? {
+        "&.btn-outline": createOutlineVariant(btnOutlineProps),
+      }
+    : {}),
+});
+
+const createOutlineVariant = (props: BtnOutlineVariantAttributes): any => ({
+  "--btn-border-color": props.mainColor ?? props.borderColor,
+  "--btn-text-color": props.textColor,
+  "--btn-bg-color": "#fff",
+  //By default, the active section is the same of the hover section in desktop mode
+  "&:active": {
+    "--btn-bg-color":
+      (props.mainColor ?? props.activeBgColor ?? props.hoverBgColor) +
+      " !important",
+    //By default, on active the text is white
+    ...(props.activeTextColor || props.hoverTextColor
+      ? {
+          "--btn-text-color": props.activeTextColor ?? props.hoverTextColor,
+        }
+      : {}),
+  },
+  "&:hover": {
+    //By default, the text color is white
+    ...(props.hoverBgColor ? { "--btn-bg-color": props.hoverBgColor } : {}),
+    "--btn-text-color": props.hoverTextColor ?? props.textColor,
+  },
+});

package/dist/UIKit/NativeSelect.js

@@ -1,5 +0,0 @@
-import o from "../packages/components/lib/UIKit/NativeSelect.vue.js";
-import '../assets/packages/components/lib/UIKit/NativeSelect.css';/* empty css                                                 */
-export {
-  o as default
-};