@amsom-habitat/ui 1.0.0

package/README.md

@@ -0,0 +1,7 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

package/dist/style.css

@@ -0,0 +1 @@
+.amsom-modal-body{max-height:80vh;overflow-y:auto}.amsom-modal-block{z-index:1000;overflow-y:auto}

package/dist/ui.js

@@ -0,0 +1,72 @@
+import { resolveComponent as f, openBlock as n, createElementBlock as l, withModifiers as u, createElementVNode as s, createBlock as h, createCommentVNode as d, renderSlot as c, toDisplayString as $ } from "vue";
+const r = (t, o) => {
+  const e = t.__vccOpts || t;
+  for (const [i, a] of o)
+    e[i] = a;
+  return e;
+}, v = {
+  name: "Modal",
+  props: {
+    closeOption: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["close"]
+}, b = { class: "container bg-white rounded-4 p-3 m-3 position-relative" }, k = { class: "amsom-modal-body" }, y = /* @__PURE__ */ s("div", { class: "mt-2" }, null, -1);
+function g(t, o, e, i, a, m) {
+  const _ = f("font-awesome-icon");
+  return n(), l("div", {
+    class: "amsom-modal-block bg-black bg-opacity-25 position-fixed top-50 start-50 translate-middle min-vw-100 min-vh-100 d-flex justify-content-center align-items-center",
+    onClick: o[1] || (o[1] = u((p) => e.closeOption ? t.$emit("close") : "", ["self"]))
+  }, [
+    s("div", b, [
+      e.closeOption ? (n(), h(_, {
+        key: 0,
+        icon: "fa-solid fa-times",
+        role: "button",
+        class: "position-absolute top-0 end-0 m-3 translate-middle-y",
+        size: "lg",
+        onClick: o[0] || (o[0] = (p) => t.$emit("close"))
+      })) : d("", !0),
+      s("div", k, [
+        y,
+        c(t.$slots, "default")
+      ])
+    ])
+  ]);
+}
+const V = /* @__PURE__ */ r(v, [["render", g]]), C = {
+  name: "Card",
+  props: {
+    title: {
+      type: String
+    }
+  }
+}, w = { class: "card" }, x = { class: "card-body" }, B = {
+  key: 0,
+  class: "card-title"
+}, O = /* @__PURE__ */ s("h5", { class: "card-title" }, " Card title ", -1), S = /* @__PURE__ */ s("p", { class: "card-text" }, " Some quick example text to build on the card title and make up the bulk of the card's content. ", -1), M = /* @__PURE__ */ s("a", {
+  href: "#",
+  class: "btn btn-primary"
+}, "Go somewhere", -1);
+function E(t, o, e, i, a, m) {
+  return n(), l("div", w, [
+    s("div", x, [
+      c(t.$slots, "header", {}, () => [
+        e.title ? (n(), l("h4", B, $(e.title), 1)) : d("", !0)
+      ]),
+      c(t.$slots, "default", {}, () => [
+        O,
+        S,
+        M
+      ])
+    ])
+  ]);
+}
+const j = /* @__PURE__ */ r(C, [["render", E]]);
+export {
+  j as Card,
+  V as Modal,
+  V as default
+};

package/dist/ui.umd.cjs

@@ -0,0 +1 @@
+(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.UI={},t.Vue))})(this,function(t,e){"use strict";const c=(o,s)=>{const n=o.__vccOpts||o;for(const[l,i]of s)n[l]=i;return n},a={name:"Modal",props:{closeOption:{type:Boolean,default:!1}},emits:["close"]},r={class:"container bg-white rounded-4 p-3 m-3 position-relative"},m={class:"amsom-modal-body"},f=e.createElementVNode("div",{class:"mt-2"},null,-1);function p(o,s,n,l,i,g){const B=e.resolveComponent("font-awesome-icon");return e.openBlock(),e.createElementBlock("div",{class:"amsom-modal-block bg-black bg-opacity-25 position-fixed top-50 start-50 translate-middle min-vw-100 min-vh-100 d-flex justify-content-center align-items-center",onClick:s[1]||(s[1]=e.withModifiers(C=>n.closeOption?o.$emit("close"):"",["self"]))},[e.createElementVNode("div",r,[n.closeOption?(e.openBlock(),e.createBlock(B,{key:0,icon:"fa-solid fa-times",role:"button",class:"position-absolute top-0 end-0 m-3 translate-middle-y",size:"lg",onClick:s[0]||(s[0]=C=>o.$emit("close"))})):e.createCommentVNode("",!0),e.createElementVNode("div",m,[f,e.renderSlot(o.$slots,"default")])])])}const d=c(a,[["render",p]]),_={name:"Card",props:{title:{type:String}}},h={class:"card"},k={class:"card-body"},u={key:0,class:"card-title"},$=e.createElementVNode("h5",{class:"card-title"}," Card title ",-1),b=e.createElementVNode("p",{class:"card-text"}," Some quick example text to build on the card title and make up the bulk of the card's content. ",-1),y=e.createElementVNode("a",{href:"#",class:"btn btn-primary"},"Go somewhere",-1);function E(o,s,n,l,i,g){return e.openBlock(),e.createElementBlock("div",h,[e.createElementVNode("div",k,[e.renderSlot(o.$slots,"header",{},()=>[n.title?(e.openBlock(),e.createElementBlock("h4",u,e.toDisplayString(n.title),1)):e.createCommentVNode("",!0)]),e.renderSlot(o.$slots,"default",{},()=>[$,b,y])])])}const V=c(_,[["render",E]]);t.Card=V,t.Modal=d,t.default=d,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@amsom-habitat/ui",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "main": "./dist/ui.umd.js",
+  "module": "./dist/ui.js",
+  "export": {
+    ".": {
+      "import": "./dist/ui.js",
+      "require": "./dist/ui.umd.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "bootstrap": "^5.3.2",
+    "vue": "^3.4.18"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "vite": "^5.1.1"
+  }
+}