npm - @vueless/storybook - Versions diffs - 1.1.3-beta.1 → 1.1.3-beta.10 - Mend

@vueless/storybook 1.1.3-beta.1 → 1.1.3-beta.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

package/.storybook-js/main.js +10 -0
package/.storybook-js/manager-head.html +34 -0
package/.storybook-js/manager.js +34 -0
package/.storybook-js/preview.js +70 -0
package/.storybook-js/public/favicons/favicon.ico +0 -0
package/.storybook-js/public/favicons/favicon.svg +4 -0
package/.storybook-js/public/images/vueless-logo-dark.svg +12 -0
package/.storybook-js/public/images/vueless-logo-light.svg +12 -0
package/.storybook-js/themes/manager.css +177 -0
package/{.storybook/index.css → .storybook-js/themes/preview.css} +0 -1
package/.storybook-js/themes/themeDark.js +44 -0
package/.storybook-js/themes/themeLight.js +44 -0
package/.storybook-js/themes/themeLightPreview.js +40 -0
package/{.storybook → .storybook-js}/vite.config.js +1 -0
package/.storybook-ts/env.d.ts +4 -0
package/.storybook-ts/main.ts +10 -0
package/.storybook-ts/manager-head.html +34 -0
package/.storybook-ts/manager.ts +34 -0
package/.storybook-ts/preview-head.html +11 -0
package/.storybook-ts/preview.ts +73 -0
package/.storybook-ts/public/favicons/favicon.ico +0 -0
package/.storybook-ts/public/favicons/favicon.svg +4 -0
package/.storybook-ts/public/images/vueless-logo-dark.svg +12 -0
package/.storybook-ts/public/images/vueless-logo-light.svg +12 -0
package/.storybook-ts/themes/manager.css +177 -0
package/.storybook-ts/themes/preview.css +612 -0
package/.storybook-ts/themes/themeDark.ts +45 -0
package/.storybook-ts/themes/themeLight.ts +45 -0
package/.storybook-ts/themes/themeLightPreview.ts +41 -0
package/.storybook-ts/tsconfig.app.json +35 -0
package/.storybook-ts/tsconfig.json +11 -0
package/.storybook-ts/tsconfig.node.json +13 -0
package/.storybook-ts/vite.config.ts +24 -0
package/LICENSE +1 -1
package/README.md +29 -2
package/bin/index.js +89 -0
package/decorators/storyDarkModeDecorator.js +37 -0
package/index.d.ts +2 -0
package/index.js +2 -114
package/package.json +29 -22
package/webTypes/index.js +0 -0
package/.storybook/decorators/storyDarkModeDecorator.js +0 -49
package/.storybook/main.js +0 -28
package/.storybook/manager-head.html +0 -215
package/.storybook/manager.js +0 -18
package/.storybook/preview.js +0 -72
package/.storybook/themes/tailwindColors.js +0 -290
package/.storybook/themes/themeDark.js +0 -46
package/.storybook/themes/themeLight.js +0 -46
package/.storybook/themes/themeLightDocs.js +0 -41
/package/{.storybook → .storybook-js}/preview-head.html +0 -0
/package/{.storybook/decorators → decorators}/vue3SourceDecorator.js +0 -0

package/.storybook/manager-head.html DELETED Viewed

@@ -1,215 +0,0 @@
-<!--
-Overrides content of storybook layout HTML page <head> tag,
--->
-<link rel="shortcut icon" href="https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/favicons/favicon.ico">
-<link rel="icon" type="image/svg+xml" href="https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/favicons/favicon.svg" />
-<!--
-Custom dark mode related vueless loader.
--->
-<div id="sb-vueless-loader">
-  <img
-    class="sb-vueless-loader-img-dark"
-    src="https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/images/vueless-logo-dark.svg"
-    alt="Vueless UI"
-    width="250" />
-  <img
-    class="sb-vueless-loader-img-light"
-    src="https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/images/vueless-logo-light.svg"
-    alt="Vueless UI"
-    width="250" />
-</div>
-<style>
-    /* -------------------- Prevent showing users default storybook theme styles -------------------- */
-    html.dark {
-        background: #111827;
-    }
-    #root {
-        visibility: hidden;
-    }
-    #sb-vueless-loader {
-        top: 0;
-        left: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: fixed;
-        background: inherit;
-        width: 100%;
-        height: 100%;
-        z-index: 999;
-    }
-    .light #sb-vueless-loader {
-        background: #f1f5f9;
-    }
-    .dark #sb-vueless-loader {
-        background: #111827;
-    }
-    .sb-vueless-loader-img-dark,
-    .sb-vueless-loader-img-light {
-        display: none;
-        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-    }
-    .light .sb-vueless-loader-img-light {
-        display: block;
-    }
-    .dark .sb-vueless-loader-img-dark {
-        display: block;
-    }
-    @keyframes pulse {
-        0%, 100% {
-            opacity: 1;
-        }
-        50% {
-            opacity: .5;
-        }
-    }
-    /* -------------------- Storybook config tooltip -------------------- */
-    div[data-testid="tooltip"] {
-        border-radius: 8px;
-        overflow: hidden;
-    }
-    div[data-testid="tooltip"] a[id]:hover,
-    div[data-testid="tooltip"] button[id]:hover {
-        background-color: rgb(17 24 39 / 5%) !important;
-    }
-    .dark div[data-testid="tooltip"] a[id]:hover,
-    .dark div[data-testid="tooltip"] button[id]:hover {
-        background-color: rgb(255 255 255 / 5%) !important;
-    }
-    /* -------------------- Storybook sidebar -------------------- */
-    .dark .sidebar-container {
-        background: #020713;
-    }
-    .sidebar-header img {
-        width: 150px;
-    }
-    .sidebar-header a:focus {
-        border: 1px solid transparent;
-    }
-    .sidebar-item {
-        border-radius: 6px !important;
-    }
-    .dark .sidebar-item:hover {
-        background: #101828 !important;
-    }
-    .dark .sidebar-item[data-selected="true"],
-    .dark .sidebar-item[data-selected="true"]:hover {
-        background: #1f2937 !important;
-    }
-    .search-field,
-    .search-result-item {
-        border-radius: 8px !important;
-    }
-    .sidebar-item,
-    .search-result-item {
-        text-transform: capitalize;
-    }
-    .light .sidebar-item svg[type="component"],
-    .light .search-result-item svg[type="component"],
-    .dark .search-result-item mark {
-        color: #10b981;
-        font-weight: 600;
-    }
-    .dark .sidebar-item svg[type="component"],
-    .dark .search-result-item svg[type="component"],
-    .light .search-result-item mark {
-        color: #059669;
-        font-weight: 600;
-    }
-    .light .sidebar-item svg[type="document"],
-    .light .sidebar-item svg[type="story"],
-    .light .search-result-item svg[type="document"],
-    .light .search-result-item svg[type="story"] {
-        color: #9ca3af;
-    }
-    .dark .sidebar-item svg[type="document"],
-    .dark .sidebar-item svg[type="story"],
-    .dark .search-result-item svg[type="document"],
-    .dark .search-result-item svg[type="story"] {
-        color: #4b5563;
-    }
-    .light .search-result-item--label {
-        color: #6b7280; /* text-gray-600 */
-    }
-    .dark .search-result-item--label {
-        color: #a8abb0; /* text-gray-400 */
-    }
-    #sidebar-bottom-wrapper {
-        display: none;
-    }
-    /* -------------------- Storybook args -------------------- */
-    .dark,
-    .dark #panel-tab-content div,
-    .dark .docblock-argstable-body > tr > td {
-        background: #030712 !important;
-    }
-    .light,
-    .light #panel-tab-content div,
-    .light .docblock-argstable-body > tr > td {
-        background: #f9fafb !important;
-    }
-    .dark .docblock-argstable-head > tr {
-        background: #1e293b !important;
-    }
-    .dark .docblock-argstable-body tr > td textarea,
-    .dark .docblock-argstable-body tr > td select,
-    .dark .docblock-argstable-body tr > td:last-child button:not([tabindex="-1"]) {
-        background: #111827;
-        border: solid 1px #1f2937;
-        box-shadow: none;
-    }
-    .light .docblock-argstable-body tr > td:last-child button:not([tabindex="-1"]) {
-        background: white;
-    }
-</style>
-<script>
-  /* This trick prevents showing users default storybook theme */
-  (() => {
-    window.onload = function() {
-      setTimeout(() => {
-        document.getElementById("root").style.visibility = 'visible';
-        document.getElementById("sb-vueless-loader").style.display = 'none';
-      }, 1500);
-    };
-  })();
-</script>

package/.storybook/manager.js DELETED Viewed

@@ -1,18 +0,0 @@
-import { addons } from "storybook/manager-api";
-import themeLight from "./themes/themeLight.js";
-import themeDark from "./themes/themeDark.js";
-const prefersColorSchemeDark = window.matchMedia("(prefers-color-scheme: dark)");
-function setSystemTheme(theme) {
-  addons.setConfig({
-    theme: theme ? themeDark : themeLight,
-    panelPosition: "right",
-  });
-}
-setSystemTheme(prefersColorSchemeDark.matches);
-prefersColorSchemeDark.addEventListener("change", (event) => {
-  setSystemTheme(event.matches);
-});

package/.storybook/preview.js DELETED Viewed

@@ -1,72 +0,0 @@
-import { setup } from "@storybook/vue3-vite";
-import { getRandomId } from "vueless";
-import themeLight from "./themes/themeLight.js";
-import themeDark from "./themes/themeDark.js";
-import themeLightDocs from "./themes/themeLightDocs.js";
-import { storyDarkModeDecorator } from "./decorators/storyDarkModeDecorator.js";
-import { vue3SourceDecorator } from "./decorators/vue3SourceDecorator.js";
-/* Tailwind styles */
-import "./index.css";
-/* Vue plugins */
-import { createVueless } from "vueless";
-import { createRouter, createWebHistory } from "vue-router";
-const vueless = createVueless();
-const router = createRouter({ history: createWebHistory(), routes: [] });
-/* Setup storybook */
-setup((app) => {
-  app.config.idPrefix = getRandomId();
-  if (!app._context.config.globalProperties.$route) {
-    app.use(router);
-    app.use(vueless);
-  }
-});
-/* Set storybook decorators */
-export const decorators = [vue3SourceDecorator, storyDarkModeDecorator()];
-/* Set storybook tags */
-export const tags = ["autodocs"];
-/* Set storybook parameters */
-export const parameters = {
-  layout: "fullscreen",
-  backgrounds: { disable: true },
-  docs: {
-    theme: themeLightDocs,
-    source: { language: "html" },
-  },
-  darkMode: {
-    light: themeLight,
-    dark: themeDark,
-    classTarget: "body",
-    stylePreview: true,
-  },
-  options: {
-    storySort: (a, b) => {
-      const idA = a.id.split("--")[0];
-      const idB = b.id.split("--")[0];
-      return idA.localeCompare(idB, undefined, { numeric: true });
-    },
-  },
-};
-/* Reload the page on the error "Failed to fetch dynamically imported module..." */
-window.addEventListener("error", (ev) => onFailedToFetchModule(ev.message));
-window.addEventListener("unhandledrejection", (ev) => onFailedToFetchModule(ev?.reason?.message));
-function onFailedToFetchModule(message) {
-  const isProd = import.meta.env.MODE === "production";
-  if (isProd && message?.includes("Failed to fetch dynamically imported module")) {
-    window.location.reload();
-  }
-}

package/.storybook/themes/tailwindColors.js DELETED Viewed

@@ -1,290 +0,0 @@
-/* Default tailwind colors */
-export const TAILWIND_COLORS = {
-  white: "#ffffff",
-  slate: {
-    50: "#f8fafc",
-    100: "#f1f5f9",
-    200: "#e2e8f0",
-    300: "#cbd5e1",
-    400: "#94a3b8",
-    500: "#64748b",
-    600: "#475569",
-    700: "#334155",
-    800: "#1e293b",
-    900: "#0f172a",
-    950: "#020617",
-  },
-  gray: {
-    50: "#f9fafb",
-    100: "#f3f4f6",
-    200: "#e5e7eb",
-    300: "#d1d5db",
-    400: "#9ca3af",
-    500: "#6b7280",
-    600: "#4b5563",
-    700: "#374151",
-    800: "#1f2937",
-    900: "#111827",
-    950: "#030712",
-  },
-  zinc: {
-    50: "#fafafa",
-    100: "#f4f4f5",
-    200: "#e4e4e7",
-    300: "#d4d4d8",
-    400: "#a1a1aa",
-    500: "#71717a",
-    600: "#52525b",
-    700: "#3f3f46",
-    800: "#27272a",
-    900: "#18181b",
-    950: "#09090b",
-  },
-  neutral: {
-    50: "#fafafa",
-    100: "#f5f5f5",
-    200: "#e5e5e5",
-    300: "#d4d4d4",
-    400: "#a3a3a3",
-    500: "#737373",
-    600: "#525252",
-    700: "#404040",
-    800: "#262626",
-    900: "#171717",
-    950: "#0a0a0a",
-  },
-  stone: {
-    50: "#fafaf9",
-    100: "#f5f5f4",
-    200: "#e7e5e4",
-    300: "#d6d3d1",
-    400: "#a8a29e",
-    500: "#78716c",
-    600: "#57534e",
-    700: "#44403c",
-    800: "#292524",
-    900: "#1c1917",
-    950: "#0c0a09",
-  },
-  red: {
-    50: "#fef2f2",
-    100: "#fee2e2",
-    200: "#fecaca",
-    300: "#fca5a5",
-    400: "#f87171",
-    500: "#ef4444",
-    600: "#dc2626",
-    700: "#b91c1c",
-    800: "#991b1b",
-    900: "#7f1d1d",
-    950: "#450a0a",
-  },
-  orange: {
-    50: "#fff7ed",
-    100: "#ffedd5",
-    200: "#fed7aa",
-    300: "#fdba74",
-    400: "#fb923c",
-    500: "#f97316",
-    600: "#ea580c",
-    700: "#c2410c",
-    800: "#9a3412",
-    900: "#7c2d12",
-    950: "#431407",
-  },
-  amber: {
-    50: "#fffbeb",
-    100: "#fef3c7",
-    200: "#fde68a",
-    300: "#fcd34d",
-    400: "#fbbf24",
-    500: "#f59e0b",
-    600: "#d97706",
-    700: "#b45309",
-    800: "#92400e",
-    900: "#78350f",
-    950: "#451a03",
-  },
-  yellow: {
-    50: "#fefce8",
-    100: "#fef9c3",
-    200: "#fef08a",
-    300: "#fde047",
-    400: "#facc15",
-    500: "#eab308",
-    600: "#ca8a04",
-    700: "#a16207",
-    800: "#854d0e",
-    900: "#713f12",
-    950: "#422006",
-  },
-  lime: {
-    50: "#f7fee7",
-    100: "#ecfccb",
-    200: "#d9f99d",
-    300: "#bef264",
-    400: "#a3e635",
-    500: "#84cc16",
-    600: "#65a30d",
-    700: "#4d7c0f",
-    800: "#3f6212",
-    900: "#365314",
-    950: "#1a2e05",
-  },
-  green: {
-    50: "#f0fdf4",
-    100: "#dcfce7",
-    200: "#bbf7d0",
-    300: "#86efac",
-    400: "#4ade80",
-    500: "#22c55e",
-    600: "#16a34a",
-    700: "#15803d",
-    800: "#166534",
-    900: "#14532d",
-    950: "#052e16",
-  },
-  emerald: {
-    50: "#ecfdf5",
-    100: "#d1fae5",
-    200: "#a7f3d0",
-    300: "#6ee7b7",
-    400: "#34d399",
-    500: "#10b981",
-    600: "#059669",
-    700: "#047857",
-    800: "#065f46",
-    900: "#064e3b",
-    950: "#022c22",
-  },
-  teal: {
-    50: "#f0fdfa",
-    100: "#ccfbf1",
-    200: "#99f6e4",
-    300: "#5eead4",
-    400: "#2dd4bf",
-    500: "#14b8a6",
-    600: "#0d9488",
-    700: "#0f766e",
-    800: "#115e59",
-    900: "#134e4a",
-    950: "#042f2e",
-  },
-  cyan: {
-    50: "#ecfeff",
-    100: "#cffafe",
-    200: "#a5f3fc",
-    300: "#67e8f9",
-    400: "#22d3ee",
-    500: "#06b6d4",
-    600: "#0891b2",
-    700: "#0e7490",
-    800: "#155e75",
-    900: "#164e63",
-    950: "#083344",
-  },
-  sky: {
-    50: "#f0f9ff",
-    100: "#e0f2fe",
-    200: "#bae6fd",
-    300: "#7dd3fc",
-    400: "#38bdf8",
-    500: "#0ea5e9",
-    600: "#0284c7",
-    700: "#0369a1",
-    800: "#075985",
-    900: "#0c4a6e",
-    950: "#082f49",
-  },
-  blue: {
-    50: "#eff6ff",
-    100: "#dbeafe",
-    200: "#bfdbfe",
-    300: "#93c5fd",
-    400: "#60a5fa",
-    500: "#3b82f6",
-    600: "#2563eb",
-    700: "#1d4ed8",
-    800: "#1e40af",
-    900: "#1e3a8a",
-    950: "#172554",
-  },
-  indigo: {
-    50: "#eef2ff",
-    100: "#e0e7ff",
-    200: "#c7d2fe",
-    300: "#a5b4fc",
-    400: "#818cf8",
-    500: "#6366f1",
-    600: "#4f46e5",
-    700: "#4338ca",
-    800: "#3730a3",
-    900: "#312e81",
-    950: "#1e1b4b",
-  },
-  violet: {
-    50: "#f5f3ff",
-    100: "#ede9fe",
-    200: "#ddd6fe",
-    300: "#c4b5fd",
-    400: "#a78bfa",
-    500: "#8b5cf6",
-    600: "#7c3aed",
-    700: "#6d28d9",
-    800: "#5b21b6",
-    900: "#4c1d95",
-    950: "#2e1065",
-  },
-  purple: {
-    50: "#faf5ff",
-    100: "#f3e8ff",
-    200: "#e9d5ff",
-    300: "#d8b4fe",
-    400: "#c084fc",
-    500: "#a855f7",
-    600: "#9333ea",
-    700: "#7e22ce",
-    800: "#6b21a8",
-    900: "#581c87",
-    950: "#3b0764",
-  },
-  fuchsia: {
-    50: "#fdf4ff",
-    100: "#fae8ff",
-    200: "#f5d0fe",
-    300: "#f0abfc",
-    400: "#e879f9",
-    500: "#d946ef",
-    600: "#c026d3",
-    700: "#a21caf",
-    800: "#86198f",
-    900: "#701a75",
-    950: "#4a044e",
-  },
-  pink: {
-    50: "#fdf2f8",
-    100: "#fce7f3",
-    200: "#fbcfe8",
-    300: "#f9a8d4",
-    400: "#f472b6",
-    500: "#ec4899",
-    600: "#db2777",
-    700: "#be185d",
-    800: "#9d174d",
-    900: "#831843",
-    950: "#500724",
-  },
-  rose: {
-    50: "#fff1f2",
-    100: "#ffe4e6",
-    200: "#fecdd3",
-    300: "#fda4af",
-    400: "#fb7185",
-    500: "#f43f5e",
-    600: "#e11d48",
-    700: "#be123c",
-    800: "#9f1239",
-    900: "#881337",
-    950: "#4c0519",
-  },
-};

package/.storybook/themes/themeDark.js DELETED Viewed

@@ -1,46 +0,0 @@
-import { create } from "storybook/theming/create";
-import { TAILWIND_COLORS } from "./tailwindColors.js";
-export default create({
-  base: "dark",
-  // Typography
-  fontBase: '"Roboto", sans-serif',
-  fontCode: "monospace",
-  brandTitle: "Vueless UI",
-  brandUrl: "https://vueless.com",
-  brandImage:
-    "https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/images/vueless-logo-dark.svg",
-  brandTarget: "_blank",
-  // Main colors
-  colorPrimary: TAILWIND_COLORS.gray["200"],
-  colorSecondary: TAILWIND_COLORS.gray["700"],
-  // UI
-  appBg: TAILWIND_COLORS.gray["900"],
-  appPreviewBg: TAILWIND_COLORS.gray["900"],
-  appBorderColor: TAILWIND_COLORS.gray["900"],
-  appBorderRadius: 0,
-  // Text colors
-  textColor: TAILWIND_COLORS.gray["300"],
-  textInverseColor: TAILWIND_COLORS.gray["800"],
-  // Toolbar default and active colors
-  barTextColor: TAILWIND_COLORS.gray["500"],
-  barHoverColor: TAILWIND_COLORS.gray["400"],
-  barSelectedColor: TAILWIND_COLORS.gray["300"],
-  barBg: TAILWIND_COLORS.gray["950"],
-  // Form colors
-  inputBg: TAILWIND_COLORS.gray["950"],
-  inputBorder: TAILWIND_COLORS.gray["600"],
-  inputTextColor: TAILWIND_COLORS.gray["100"],
-  inputBorderRadius: 4,
-  buttonBg: TAILWIND_COLORS.gray["800"],
-  buttonBorder: TAILWIND_COLORS.gray["800"],
-  booleanBg: TAILWIND_COLORS.gray["900"],
-  booleanSelectedBg: TAILWIND_COLORS.gray["800"],
-});

package/.storybook/themes/themeLight.js DELETED Viewed

@@ -1,46 +0,0 @@
-import { create } from "storybook/theming/create";
-import { TAILWIND_COLORS } from "./tailwindColors.js";
-export default create({
-  base: "light",
-  // Typography
-  fontBase: '"Roboto", sans-serif',
-  fontCode: "monospace",
-  brandTitle: "Vueless UI",
-  brandUrl: "https://vueless.com",
-  brandImage:
-    "https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/images/vueless-logo-light.svg",
-  brandTarget: "_blank",
-  // Main colors
-  colorPrimary: TAILWIND_COLORS.gray["900"],
-  colorSecondary: TAILWIND_COLORS.gray["500"],
-  // UI
-  appBg: TAILWIND_COLORS.white,
-  appPreviewBg: TAILWIND_COLORS.gray["50"],
-  appBorderColor: TAILWIND_COLORS.gray["300"],
-  appBorderRadius: 0,
-  // Text colors
-  textColor: TAILWIND_COLORS.gray["900"],
-  textInverseColor: TAILWIND_COLORS.gray["900"],
-  // Toolbar default and active colors
-  barTextColor: TAILWIND_COLORS.gray["500"],
-  barHoverColor: TAILWIND_COLORS.gray["600"],
-  barSelectedColor: TAILWIND_COLORS.gray["700"],
-  barBg: TAILWIND_COLORS.gray["50"],
-  // Form colors
-  inputBg: TAILWIND_COLORS.white,
-  inputBorder: TAILWIND_COLORS.gray["300"],
-  inputTextColor: TAILWIND_COLORS.gray["900"],
-  inputBorderRadius: 4,
-  buttonBg: TAILWIND_COLORS.gray["100"],
-  buttonBorder: TAILWIND_COLORS.gray["200"],
-  booleanBg: TAILWIND_COLORS.gray["50"],
-  booleanSelectedBg: TAILWIND_COLORS.gray["200"],
-});