@oottoo-core/oottoo-ui 0.0.1

package/README.md

@@ -0,0 +1,88 @@
+# @oottoo-core/oottoo-ui
+
+Componentes UI para Vue 3 - Ootto Core.
+
+## 📦 Instalación
+
+```bash
+npm install @oottoo-core/oottoo-ui
+```
+
+## 🚀 Uso
+
+```javascript
+import { createApp } from 'vue'
+import oottoUI from '@oottoo-core/oottoo-ui'
+import '@oottoo-core/oottoo-ui/oottoo-ui.css'
+
+const app = createApp(App)
+app.use(oottoUI)
+```
+
+## 🧩 Componentes
+
+### OButton
+
+```vue
+<template>
+  <o-button variant="primary" @click="handleClick">
+    Click me
+  </o-button>
+</template>
+```
+
+**Props:**
+- `variant`: 'primary' | 'secondary' | 'ghost'
+- `size`: 'sm' | 'md' | 'lg'
+- `disabled`: boolean
+- `type`: string
+
+### OModal
+
+```vue
+<template>
+  <o-modal :is-open="showModal" @close="showModal = false">
+    <h2>Título</h2>
+    <p>Contenido</p>
+  </o-modal>
+</template>
+```
+
+**Props:**
+- `isOpen`: boolean
+- `zIndex`: number
+
+**Events:**
+- `close`: Se emite al cerrar
+
+### OLoading
+
+```vue
+<template>
+  <o-loading :loading="isLoading" size="md" color="primary" />
+</template>
+```
+
+**Props:**
+- `loading`: boolean
+- `size`: 'sm' | 'md' | 'lg'
+- `color`: string
+
+### OIcon
+
+Requiere `@oottoo-core/oottoo-icons`:
+
+```vue
+<template>
+  <o-icon name="home" size="24" color="#3b82f6" />
+</template>
+```
+
+**Props:**
+- `name`: string (requerido)
+- `size`: number | string
+- `color`: string
+
+## 📄 Licencia
+
+MIT - Ootto Core Team

package/dist/oottoo-core.css

@@ -0,0 +1 @@
+.o-modal-enter-active[data-v-11d6d987],.o-modal-leave-active[data-v-11d6d987]{transition:opacity var(--o-transition-base)}.o-modal-enter-from[data-v-11d6d987],.o-modal-leave-to[data-v-11d6d987]{opacity:0}

package/dist/oottoo-ui.es.js

@@ -0,0 +1,228 @@
+import { computed as i, openBlock as a, createElementBlock as c, normalizeClass as y, renderSlot as m, onMounted as g, onUnmounted as h, createBlock as v, Teleport as k, createVNode as _, Transition as z, withCtx as O, withModifiers as b, normalizeStyle as u, createElementVNode as d, createCommentVNode as p, inject as w } from "vue";
+const x = ["disabled", "type"], S = {
+  __name: "OButton",
+  props: {
+    /**
+     * Variante visual del botón
+     * @values 'primary', 'secondary', 'ghost'
+     */
+    variant: {
+      type: String,
+      default: "primary",
+      validator: (e) => ["primary", "secondary", "ghost"].includes(e)
+    },
+    /**
+     * Tamaño del botón
+     * @values 'sm', 'md', 'lg'
+     */
+    size: {
+      type: String,
+      default: "md",
+      validator: (e) => ["sm", "md", "lg"].includes(e)
+    },
+    /**
+     * Estado deshabilitado
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Tipo de botón HTML
+     */
+    type: {
+      type: String,
+      default: "button"
+    }
+  },
+  emits: ["click"],
+  setup(e, { emit: o }) {
+    const t = e, n = o, s = (l) => {
+      t.disabled || n("click", l);
+    }, r = i(() => [
+      "o-button",
+      `o-button--${t.variant}`,
+      `o-button--${t.size}`
+    ]);
+    return (l, f) => (a(), c("button", {
+      class: y(r.value),
+      disabled: e.disabled,
+      type: e.type,
+      onClick: s
+    }, [
+      m(l.$slots, "default")
+    ], 10, x));
+  }
+}, C = (e, o) => {
+  const t = e.__vccOpts || e;
+  for (const [n, s] of o)
+    t[n] = s;
+  return t;
+}, $ = { class: "o-modal-content" }, B = {
+  __name: "OModal",
+  props: {
+    /**
+     * Controla la visibilidad del modal
+     */
+    isOpen: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Z-index del modal
+     */
+    zIndex: {
+      type: Number,
+      default: 50
+    }
+  },
+  emits: ["close"],
+  setup(e, { emit: o }) {
+    const t = e, n = o, s = () => {
+      n("close");
+    }, r = (l) => {
+      l.key === "Escape" && t.isOpen && s();
+    };
+    return g(() => {
+      document.addEventListener("keydown", r);
+    }), h(() => {
+      document.removeEventListener("keydown", r);
+    }), (l, f) => (a(), v(k, { to: "body" }, [
+      _(z, { name: "o-modal" }, {
+        default: O(() => [
+          e.isOpen ? (a(), c("div", {
+            key: 0,
+            class: "o-modal-overlay",
+            style: u({ zIndex: e.zIndex }),
+            onClick: b(s, ["self"])
+          }, [
+            d("div", $, [
+              m(l.$slots, "default", {}, void 0, !0)
+            ])
+          ], 4)) : p("", !0)
+        ]),
+        _: 3
+      })
+    ]));
+  }
+}, I = /* @__PURE__ */ C(B, [["__scopeId", "data-v-11d6d987"]]), M = ["width", "height"], L = {
+  __name: "OLoading",
+  props: {
+    /**
+     * Controla la visibilidad del spinner
+     */
+    loading: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Tamaño del spinner
+     * @values 'sm', 'md', 'lg'
+     */
+    size: {
+      type: String,
+      default: "md",
+      validator: (e) => ["sm", "md", "lg"].includes(e)
+    },
+    /**
+     * Color del spinner
+     */
+    color: {
+      type: String,
+      default: "currentColor"
+    }
+  },
+  setup(e) {
+    const o = e, t = {
+      sm: 16,
+      md: 24,
+      lg: 32
+    }, n = i(() => t[o.size]);
+    return (s, r) => e.loading ? (a(), c("div", {
+      key: 0,
+      class: "o-loading",
+      style: u({ color: e.color })
+    }, [
+      (a(), c("svg", {
+        width: n.value,
+        height: n.value,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, [...r[0] || (r[0] = [
+        d("circle", {
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          "stroke-width": "4",
+          "stroke-linecap": "round",
+          "stroke-dasharray": "60",
+          "stroke-dashoffset": "20",
+          opacity: "0.25"
+        }, null, -1),
+        d("path", {
+          d: "M12 2C6.477 2 2 6.477 2 12",
+          stroke: "currentColor",
+          "stroke-width": "4",
+          "stroke-linecap": "round"
+        }, null, -1)
+      ])], 8, M))
+    ], 4)) : p("", !0);
+  }
+}, E = ["innerHTML"], N = {
+  __name: "OIcon",
+  props: {
+    /**
+     * Nombre del icono (debe existir en @oottoo-core/oottoo-icons)
+     */
+    name: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Tamaño del icono en píxeles
+     */
+    size: {
+      type: [Number, String],
+      default: 24
+    },
+    /**
+     * Color del icono
+     */
+    color: {
+      type: String,
+      default: "currentColor"
+    }
+  },
+  setup(e) {
+    const o = e, t = i(
+      () => typeof o.size == "number" ? `${o.size}px` : o.size
+    ), n = w("oIcons", void 0), s = i(() => n ? n(o.name) : "");
+    return (r, l) => (a(), c("span", {
+      class: "o-icon",
+      style: u({
+        width: t.value,
+        height: t.value,
+        color: e.color
+      }),
+      innerHTML: s.value
+    }, null, 12, E));
+  }
+}, V = {
+  /**
+   * Instala el plugin en la aplicación Vue
+   *
+   * @param {import('vue').App} app - Instancia de la aplicación
+   */
+  install(e) {
+    e.component("OButton", S), e.component("OModal", I), e.component("OLoading", L), e.component("OIcon", N);
+  }
+};
+export {
+  S as OButton,
+  N as OIcon,
+  L as OLoading,
+  I as OModal,
+  V as default
+};

package/dist/oottoo-ui.umd.js

@@ -0,0 +1 @@
+(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.OottoUI={},l.Vue))})(this,(function(l,e){"use strict";const p=["disabled","type"],d={__name:"OButton",props:{variant:{type:String,default:"primary",validator:t=>["primary","secondary","ghost"].includes(t)},size:{type:String,default:"md",validator:t=>["sm","md","lg"].includes(t)},disabled:{type:Boolean,default:!1},type:{type:String,default:"button"}},emits:["click"],setup(t,{emit:n}){const o=t,c=n,s=r=>{o.disabled||c("click",r)},i=e.computed(()=>["o-button",`o-button--${o.variant}`,`o-button--${o.size}`]);return(r,_)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(i.value),disabled:t.disabled,type:t.type,onClick:s},[e.renderSlot(r.$slots,"default")],10,p))}},f=(t,n)=>{const o=t.__vccOpts||t;for(const[c,s]of n)o[c]=s;return o},y={class:"o-modal-content"},a=f({__name:"OModal",props:{isOpen:{type:Boolean,default:!1},zIndex:{type:Number,default:50}},emits:["close"],setup(t,{emit:n}){const o=t,c=n,s=()=>{c("close")},i=r=>{r.key==="Escape"&&o.isOpen&&s()};return e.onMounted(()=>{document.addEventListener("keydown",i)}),e.onUnmounted(()=>{document.removeEventListener("keydown",i)}),(r,_)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:"o-modal"},{default:e.withCtx(()=>[t.isOpen?(e.openBlock(),e.createElementBlock("div",{key:0,class:"o-modal-overlay",style:e.normalizeStyle({zIndex:t.zIndex}),onClick:e.withModifiers(s,["self"])},[e.createElementVNode("div",y,[e.renderSlot(r.$slots,"default",{},void 0,!0)])],4)):e.createCommentVNode("",!0)]),_:3})]))}},[["__scopeId","data-v-11d6d987"]]),k=["width","height"],m={__name:"OLoading",props:{loading:{type:Boolean,default:!0},size:{type:String,default:"md",validator:t=>["sm","md","lg"].includes(t)},color:{type:String,default:"currentColor"}},setup(t){const n=t,o={sm:16,md:24,lg:32},c=e.computed(()=>o[n.size]);return(s,i)=>t.loading?(e.openBlock(),e.createElementBlock("div",{key:0,class:"o-loading",style:e.normalizeStyle({color:t.color})},[(e.openBlock(),e.createElementBlock("svg",{width:c.value,height:c.value,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[...i[0]||(i[0]=[e.createElementVNode("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"4","stroke-linecap":"round","stroke-dasharray":"60","stroke-dashoffset":"20",opacity:"0.25"},null,-1),e.createElementVNode("path",{d:"M12 2C6.477 2 2 6.477 2 12",stroke:"currentColor","stroke-width":"4","stroke-linecap":"round"},null,-1)])],8,k))],4)):e.createCommentVNode("",!0)}},h=["innerHTML"],u={__name:"OIcon",props:{name:{type:String,required:!0},size:{type:[Number,String],default:24},color:{type:String,default:"currentColor"}},setup(t){const n=t,o=e.computed(()=>typeof n.size=="number"?`${n.size}px`:n.size),c=e.inject("oIcons",void 0),s=e.computed(()=>c?c(n.name):"");return(i,r)=>(e.openBlock(),e.createElementBlock("span",{class:"o-icon",style:e.normalizeStyle({width:o.value,height:o.value,color:t.color}),innerHTML:s.value},null,12,h))}},g={install(t){t.component("OButton",d),t.component("OModal",a),t.component("OLoading",m),t.component("OIcon",u)}};l.OButton=d,l.OIcon=u,l.OLoading=m,l.OModal=a,l.default=g,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@oottoo-core/oottoo-ui",
+  "version": "0.0.1",
+  "description": "Componentes UI para Vue 3 - Ootto Core",
+  "type": "module",
+  "main": "./dist/oottoo-ui.umd.js",
+  "module": "./dist/oottoo-ui.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/oottoo-ui.es.js",
+      "require": "./dist/oottoo-ui.umd.js"
+    },
+    "./oottoo-ui.css": "./dist/oottoo-core.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "vue3",
+    "components",
+    "ui",
+    "oottoo-core"
+  ],
+  "author": "Ootto Core Team",
+  "license": "MIT",
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.4",
+    "vite": "^6.0.11",
+    "vite-plugin-vue-devtools": "^7.7.0",
+    "vue": "^3.5.13"
+  }
+}