@superruudje/picobello 0.1.0-beta.2

package/README.md

@@ -0,0 +1,88 @@
+# Picobello
+
+Picobello is a Vue 3 design system and component library.
+
+⚠️ **Status:** Beta  
+The API may change before a stable `1.0.0` release.
+
+---
+
+## Installation
+
+```bash
+npm install @rudihaamke/picobello@beta
+```
+
+---
+
+## Usage
+
+### Import styles (required)
+Import the global styles once in your app entry:
+
+```ts
+// main.ts
+import "@rudihaamke/picobello/dist/style.css";
+```
+
+### Use components
+```vue
+<script setup lang="ts">
+import { Button, Heading, Flex } from "@rudihaamke/picobello";
+</script>
+
+<template>
+  <Heading :level="1" :visual="3">Dashboard</Heading>
+
+  <Flex gap="sm" align="center">
+    <Button label="Save" />
+    <Button label="Cancel" variant="secondary" />
+  </Flex>
+</template>
+```
+
+---
+
+## Components
+
+Currently available (beta):
+
+- Button
+- Heading
+- Flex
+- Card
+- NavigationCard
+- Loader
+
+More components will be added over time.
+
+---
+
+## Vue compatibility
+
+- Vue 3.x
+- Vue is a peer dependency and must be installed in the consuming project.
+
+---
+
+## Icons
+
+Picobello uses Bootstrap Icons internally.  
+Icons are included via the library’s CSS and work out of the box.
+
+All icon usage is overridable via slots.
+
+---
+
+## Development
+
+```bash
+npm install
+npm run storybook
+```
+
+---
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),r=["aria-hidden"],d=e.defineComponent({__name:"Icon",props:{name:{},size:{default:"1em"},title:{}},setup(t){return(l,o)=>(e.openBlock(),e.createElementBlock("i",{class:e.normalizeClass(["bi",`bi-${t.name}`]),style:e.normalizeStyle({fontSize:typeof t.size=="number"?`${t.size}px`:t.size}),"aria-hidden":t.title?void 0:"true",role:"img"},null,14,r))}}),u={class:"alert__icon"},m={class:"alert__content"},f=e.defineComponent({__name:"Alert",props:{type:{default:"info"}},setup(t){const l=t,o=e.computed(()=>l.type==="warning"?"exclamation-circle-fill":l.type==="success"?"check-circle-fill":l.type==="info"?"info-circle-fill":l.type==="danger"?"x-circle-fill":"");return(n,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([`alert--${l.type}`,"alert"])},[e.createElementVNode("div",u,[e.renderSlot(n.$slots,"alert-icon",{},()=>[e.createVNode(d,{name:o.value},null,8,["name"])])]),e.createElementVNode("div",m,[e.renderSlot(n.$slots,"alert-content")])],2))}}),b={key:0,class:"btn__text"},h=e.defineComponent({__name:"Button",props:{label:{},variant:{default:"primary"},size:{default:"default"},disabled:{type:Boolean,default:!1},active:{type:Boolean,default:!1},as:{default:"button"},href:{},type:{default:"button"}},setup(t){const l=t,o=e.computed(()=>["btn",`btn--${l.variant}`,l.size==="small"&&"btn--small",l.disabled&&"btn--disabled",l.active&&"active"]),n=a=>{l.disabled&&(a.preventDefault(),a.stopImmediatePropagation())};return(a,s)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.as),{"aria-disabled":t.as!=="button"?t.disabled:void 0,class:e.normalizeClass(o.value),disabled:t.as==="button"?t.disabled:void 0,href:t.as==="a"&&!t.disabled?t.href:void 0,type:t.as==="button"?t.type:void 0,onClick:n},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"icon-left"),t.label?(e.openBlock(),e.createElementBlock("span",b,e.toDisplayString(t.label),1)):e.renderSlot(a.$slots,"default",{key:1}),e.renderSlot(a.$slots,"icon-right")]),_:3},8,["aria-disabled","class","disabled","href","type"]))}}),v={class:"card"},p={key:0,class:"card__header"},y={key:0,class:"card__title"},k=["aria-expanded"],B={key:1,class:"card__footer"},C={class:"card__footer-content"},$=e.defineComponent({__name:"Card",props:{title:{},collapsible:{type:Boolean,default:!1},defaultCollapsed:{type:Boolean,default:!1}},setup(t){const l=t,o=e.useSlots(),n=e.computed(()=>!!l.title||!!o["header-icon"]),a=e.computed(()=>!!o["footer-content"]),s=e.ref(l.defaultCollapsed);function i(){s.value=!s.value}return(c,S)=>(e.openBlock(),e.createElementBlock("div",v,[n.value?(e.openBlock(),e.createElementBlock("div",p,[e.renderSlot(c.$slots,"header-icon"),t.title?(e.openBlock(),e.createElementBlock("h3",y,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.renderSlot(c.$slots,"header-buttons"),t.collapsible?(e.openBlock(),e.createElementBlock("button",{key:1,class:"card__collapse-toggle btn btn--small btn--secondary",type:"button",onClick:i,"aria-expanded":!s.value},[e.renderSlot(c.$slots,"collapse-indicator",{},()=>[e.createElementVNode("i",{class:e.normalizeClass(["bi bi-chevron-up",{"is-collapsed":s.value}])},null,2)])],8,k)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["card__body",{"with-header":n.value}])},[e.renderSlot(c.$slots,"card-body")],2),[[e.vShow,!s.value]]),a.value&&!s.value?(e.openBlock(),e.createElementBlock("div",B,[e.createElementVNode("div",C,[e.renderSlot(c.$slots,"footer-content")])])):e.createCommentVNode("",!0)]))}});exports.Alert=f;exports.Button=h;exports.Card=$;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './src/index'
+export {}

package/dist/index.mjs

@@ -0,0 +1,137 @@
+import { defineComponent as h, createElementBlock as n, openBlock as s, normalizeStyle as y, normalizeClass as u, computed as b, createElementVNode as r, renderSlot as a, createVNode as $, createBlock as p, resolveDynamicComponent as _, withCtx as k, toDisplayString as m, useSlots as C, ref as g, createCommentVNode as f, withDirectives as z, vShow as B } from "vue";
+const S = ["aria-hidden"], w = /* @__PURE__ */ h({
+  __name: "Icon",
+  props: {
+    name: {},
+    size: { default: "1em" },
+    title: {}
+  },
+  setup(e) {
+    return (t, o) => (s(), n("i", {
+      class: u(["bi", `bi-${e.name}`]),
+      style: y({ fontSize: typeof e.size == "number" ? `${e.size}px` : e.size }),
+      "aria-hidden": e.title ? void 0 : "true",
+      role: "img"
+    }, null, 14, S));
+  }
+}), D = { class: "alert__icon" }, N = { class: "alert__content" }, q = /* @__PURE__ */ h({
+  __name: "Alert",
+  props: {
+    type: { default: "info" }
+  },
+  setup(e) {
+    const t = e, o = b(() => t.type === "warning" ? "exclamation-circle-fill" : t.type === "success" ? "check-circle-fill" : t.type === "info" ? "info-circle-fill" : t.type === "danger" ? "x-circle-fill" : "");
+    return (i, l) => (s(), n("div", {
+      class: u([`alert--${t.type}`, "alert"])
+    }, [
+      r("div", D, [
+        a(i.$slots, "alert-icon", {}, () => [
+          $(w, { name: o.value }, null, 8, ["name"])
+        ])
+      ]),
+      r("div", N, [
+        a(i.$slots, "alert-content")
+      ])
+    ], 2));
+  }
+}), V = {
+  key: 0,
+  class: "btn__text"
+}, G = /* @__PURE__ */ h({
+  __name: "Button",
+  props: {
+    label: {},
+    variant: { default: "primary" },
+    size: { default: "default" },
+    disabled: { type: Boolean, default: !1 },
+    active: { type: Boolean, default: !1 },
+    as: { default: "button" },
+    href: {},
+    type: { default: "button" }
+  },
+  setup(e) {
+    const t = e, o = b(() => [
+      "btn",
+      `btn--${t.variant}`,
+      t.size === "small" && "btn--small",
+      t.disabled && "btn--disabled",
+      t.active && "active"
+    ]), i = (l) => {
+      t.disabled && (l.preventDefault(), l.stopImmediatePropagation());
+    };
+    return (l, c) => (s(), p(_(e.as), {
+      "aria-disabled": e.as !== "button" ? e.disabled : void 0,
+      class: u(o.value),
+      disabled: e.as === "button" ? e.disabled : void 0,
+      href: e.as === "a" && !e.disabled ? e.href : void 0,
+      type: e.as === "button" ? e.type : void 0,
+      onClick: i
+    }, {
+      default: k(() => [
+        a(l.$slots, "icon-left"),
+        e.label ? (s(), n("span", V, m(e.label), 1)) : a(l.$slots, "default", { key: 1 }),
+        a(l.$slots, "icon-right")
+      ]),
+      _: 3
+    }, 8, ["aria-disabled", "class", "disabled", "href", "type"]));
+  }
+}), x = { class: "card" }, A = {
+  key: 0,
+  class: "card__header"
+}, E = {
+  key: 0,
+  class: "card__title"
+}, I = ["aria-expanded"], F = {
+  key: 1,
+  class: "card__footer"
+}, H = { class: "card__footer-content" }, J = /* @__PURE__ */ h({
+  __name: "Card",
+  props: {
+    title: {},
+    collapsible: { type: Boolean, default: !1 },
+    defaultCollapsed: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const t = e, o = C(), i = b(() => !!t.title || !!o["header-icon"]), l = b(() => !!o["footer-content"]), c = g(t.defaultCollapsed);
+    function v() {
+      c.value = !c.value;
+    }
+    return (d, P) => (s(), n("div", x, [
+      i.value ? (s(), n("div", A, [
+        a(d.$slots, "header-icon"),
+        e.title ? (s(), n("h3", E, m(e.title), 1)) : f("", !0),
+        a(d.$slots, "header-buttons"),
+        e.collapsible ? (s(), n("button", {
+          key: 1,
+          class: "card__collapse-toggle btn btn--small btn--secondary",
+          type: "button",
+          onClick: v,
+          "aria-expanded": !c.value
+        }, [
+          a(d.$slots, "collapse-indicator", {}, () => [
+            r("i", {
+              class: u(["bi bi-chevron-up", { "is-collapsed": c.value }])
+            }, null, 2)
+          ])
+        ], 8, I)) : f("", !0)
+      ])) : f("", !0),
+      z(r("div", {
+        class: u(["card__body", { "with-header": i.value }])
+      }, [
+        a(d.$slots, "card-body")
+      ], 2), [
+        [B, !c.value]
+      ]),
+      l.value && !c.value ? (s(), n("div", F, [
+        r("div", H, [
+          a(d.$slots, "footer-content")
+        ])
+      ])) : f("", !0)
+    ]));
+  }
+});
+export {
+  q as Alert,
+  G as Button,
+  J as Card
+};