combo-ui-vue 0.1.0 → 0.2.0

package/README.md

@@ -0,0 +1,105 @@
+# COMBO-UI VUE
+
+Paquete para utilizar los temas de [COMBO-UI Editor](https://github.com/masweb/combo-ui-editor) en aplicaciones Vue 3.
+
+#### npm
+
+```bash
+npm install combo-ui-vue
+```
+
+#### pnpm
+
+```bash
+pnpm install combo-ui-vue
+```
+
+## Setup
+
+```ts
+// main.ts
+import { createApp } from "vue";
+import { ComboUIPlugin } from "combo-ui-vue";
+import theme from "./theme.json";
+
+const app = createApp(App);
+app.use(ComboUIPlugin, { theme });
+```
+
+## Composable
+
+```ts
+import { useComboUI } from "combo-ui-vue";
+
+const { isDark, toggleDarkMode, setDarkMode } = useComboUI();
+```
+
+## Components
+
+### ThemeToggler
+
+Componente para toggle dark/light. Botón con iconos sol/luna por defecto, totalmente configurable via slots.
+
+#### Uso básico
+
+```vue
+<script setup>
+import { ThemeToggler } from "combo-ui-vue";
+</script>
+
+<template>
+  <ThemeToggler />
+</template>
+```
+
+#### Iconos personalizados via props
+
+```vue
+<ThemeToggler
+  icon-light="<svg>...</svg>"
+  icon-dark="<svg>...</svg>"
+/>
+```
+
+#### Iconos personalizados via slots
+
+```vue
+<ThemeToggler>
+  <template #light>🌙</template>
+  <template #dark>☀️</template>
+</ThemeToggler>
+```
+
+#### Trigger completamente custom via slot default
+
+```vue
+<ThemeToggler v-slot="{ isDark, toggleDarkMode }">
+  <button class="cui-button --primary" @click="toggleDarkMode">
+    {{ isDark ? "☀️" : "🌙" }}
+  </button>
+</ThemeToggler>
+```
+
+```vue
+<ThemeToggler v-slot="{ isDark, toggleDarkMode }">
+  <button class="cui-button --primary" @click="toggleDarkMode">
+    <IconSun v-if="isDark" />
+    <IconMoon v-else />
+  </button>
+</ThemeToggler>
+```
+
+#### Props
+
+| Prop        | Type   | Default  | Description                              |
+| ----------- | ------ | -------- | ---------------------------------------- |
+| `iconLight` | String | Sun SVG  | SVG para modo light (se muestra en dark) |
+| `iconDark`  | String | Moon SVG | SVG para modo dark (se muestra en light) |
+
+#### Slots
+
+| Slot      | Props                                 | Description                                   |
+| --------- | ------------------------------------- | --------------------------------------------- |
+| `default` | `{ isDark: boolean, toggleDarkMode }` | Reemplaza el botón completo                   |
+| `light`   | —                                     | Contenido/icono mostrado cuando está en dark  |
+| `dark`    | —                                     | Contenido/icono mostrado cuando está en light |

package/dist/index.d.mts

@@ -1,8 +1,37 @@
+import * as vue from "vue";
 import { App, DeepReadonly, Ref } from "vue";
 
+//#region src/components/ThemeToggler.d.ts
+declare const ThemeToggler: vue.DefineComponent<vue.ExtractPropTypes<{
+  iconLight: {
+    type: StringConstructor;
+    default: string;
+  };
+  iconDark: {
+    type: StringConstructor;
+    default: string;
+  };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+  [key: string]: any;
+}>[] | vue.VNode<vue.RendererNode, vue.RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+  iconLight: {
+    type: StringConstructor;
+    default: string;
+  };
+  iconDark: {
+    type: StringConstructor;
+    default: string;
+  };
+}>> & Readonly<{}>, {
+  iconLight: string;
+  iconDark: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+//#endregion
 //#region src/types.d.ts
 /**
- * Types for @combo-ux/vanilla
+ * Types for @combo-ui/vanilla
  */
 interface BorderValue {
   style: string;
@@ -435,7 +464,7 @@ interface ThemeSyncOptions {
   /** Callback when theme is updated */
   onThemeUpdate?: (theme: ThemeData) => void;
 }
-interface ComboUXOptions {
+interface ComboUIOptions {
   /** Theme data object or URL to JSON file */
   theme: ThemeData | string;
   /** Dark mode setting: 'auto' (follows system), 'light', or 'dark' */
@@ -464,15 +493,15 @@ interface ControlsOptions {
 type DarkModeChangeCallback = (isDark: boolean) => void;
 type ThemeLoadCallback = (theme: ThemeData) => void;
 //#endregion
-//#region src/combo-ux.d.ts
-declare class ComboUX {
+//#region src/combo-ui.d.ts
+declare class ComboUI {
   private options;
   private darkMode;
   private cssInjector;
   private themeLoader;
   private themeSync;
   private currentTheme;
-  constructor(options: ComboUXOptions);
+  constructor(options: ComboUIOptions);
   /**
    * Initialize the library (must be called manually or via composable)
    */
@@ -525,40 +554,53 @@ declare class ComboUX {
   destroy(): void;
 }
 //#endregion
-//#region src/composables/useComboUX.d.ts
-interface UseComboUXReturn {
+//#region src/reset/index.d.ts
+/**
+ * App Reset by Ben Frain
+ * https://github.com/benfrain/app-reset
+ */
+declare const RESET_CSS = ":root{interpolate-size:allow-keywords;color-scheme:light dark}html{box-sizing:border-box;--fontStack:-apple-system,BlinkMacSystemFont,\"Helvetica Neue\",\"Segoe UI\",Tahoma,Roboto,Oxygen,Ubuntu,Cantarell,\"Fira Sans\",\"Open Sans\",sans-serif;font-family:var(--fontStack);-webkit-tap-highlight-color:transparent}*{user-select:none;box-sizing:inherit}*:before,*:after{box-sizing:inherit}body,h1,h2,h3,h4,h5,h6,p{margin:0;font-size:1rem;font-weight:400}a{text-decoration:none;color:inherit}b{font-weight:400}em,i{font-style:normal}a:focus,button:focus{outline:0}button{appearance:none;background-color:transparent;border:0;padding:0;text-align:inherit;font-family:inherit;font-weight:inherit;font-size:inherit;margin:0}button:hover{cursor:pointer}input,fieldset{appearance:none;border:0;padding:0;margin:0;min-width:0;font-size:inherit;font-family:inherit}input:focus{outline:0}input[type=\"number\"]::-webkit-inner-spin-button,input[type=\"number\"]::-webkit-outer-spin-button{appearance:none}svg{display:block}img{max-width:100%;display:block}body{box-sizing:border-box}";
+/**
+ * Inject CSS Reset into the page
+ */
+declare function injectReset(): void;
+//#endregion
+//#region src/composables/useComboUI.d.ts
+interface UseComboUIReturn {
   isInitialized: DeepReadonly<Ref<boolean>>;
   isDark: DeepReadonly<Ref<boolean>>;
-  instance: ComboUX | null;
+  instance: ComboUI | null;
   toggleDarkMode: () => void;
   setDarkMode: (value: boolean | 'auto') => void;
   updateTheme: (theme: ThemeData) => void;
 }
 /**
- * Initialize ComboUX with options
+ * Initialize ComboUI with options
  * Should be called once in your app entry point
  */
-declare function initComboUX(options: ComboUXOptions): Promise<ComboUX>;
+declare function initComboUI(options: ComboUIOptions): Promise<ComboUI>;
 /**
- * Get the current ComboUX instance
+ * Get the current ComboUI instance
  */
-declare function getComboUX(): ComboUX | null;
+declare function getComboUI(): ComboUI | null;
 /**
- * Vue composable to use ComboUX in components
+ * Vue composable to use ComboUI in components
  */
-declare function useComboUX(): UseComboUXReturn;
+declare function useComboUI(): UseComboUIReturn;
 /**
- * Destroy the ComboUX instance
+ * Destroy the ComboUI instance
  */
-declare function destroyComboUX(): void;
+declare function destroyComboUI(): void;
 //#endregion
 //#region src/index.d.ts
-interface ComboUXPluginOptions extends ComboUXOptions {
+interface ComboUIPluginOptions extends ComboUIOptions {
   /** Auto initialize on install */
   autoInit?: boolean;
+  /** Inject CSS reset on install (default: true) */
+  reset?: boolean;
 }
-declare const ComboUXPlugin: {
-  install(app: App<any>, options: ComboUXPluginOptions): Promise<void>;
+declare const ComboUIPlugin: {
+  install(app: App<any>, options: ComboUIPluginOptions): Promise<void>;
 };
 //#endregion
-export { AlertComponentData, AlertVariant, AvatarComponentData, AvatarVariant, BadgeComponentData, BadgeVariant, BorderRadiusValue, BorderValue, ButtonComponentData, ButtonVariant, CardComponentData, CardVariant, ChipComponentData, ChipVariant, ComboUX, type ComboUXOptions, ComboUXPlugin, ComboUXPlugin as default, ComboUXPluginOptions, ComponentShadows, ControlsOptions, DarkModeChangeCallback, DarkModeSetting, DarkToggleOptions, FormsData, FormsGlobalConfig, FormsVariant, PaddingValue, Position, ProgressComponentData, ProgressType, ProgressVariant, ShadowValue, SpinnerComponentData, SpinnerType, SpinnerVariant, ThemeButtonOptions, type ThemeData, ThemeLoadCallback, ThemeSyncOptions, TypographyData, TypographyGlobalConfig, TypographyVariant, UnitNumber, type UseComboUXReturn, destroyComboUX, getComboUX, initComboUX, useComboUX };
+export { AlertComponentData, AlertVariant, AvatarComponentData, AvatarVariant, BadgeComponentData, BadgeVariant, BorderRadiusValue, BorderValue, ButtonComponentData, ButtonVariant, CardComponentData, CardVariant, ChipComponentData, ChipVariant, ComboUI, type ComboUIOptions, ComboUIPlugin, ComboUIPlugin as default, ComboUIPluginOptions, ComponentShadows, ControlsOptions, DarkModeChangeCallback, DarkModeSetting, DarkToggleOptions, FormsData, FormsGlobalConfig, FormsVariant, PaddingValue, Position, ProgressComponentData, ProgressType, ProgressVariant, RESET_CSS, ShadowValue, SpinnerComponentData, SpinnerType, SpinnerVariant, ThemeButtonOptions, type ThemeData, ThemeLoadCallback, ThemeSyncOptions, ThemeToggler, TypographyData, TypographyGlobalConfig, TypographyVariant, UnitNumber, type UseComboUIReturn, destroyComboUI, getComboUI, initComboUI, injectReset, useComboUI };