vui-toolkit 0.0.1

package/dist/vui-toolkit.umd.js

@@ -0,0 +1,289 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.VuiToolkit = {}, global.Vue));
+})(this, (function (exports, vue) { 'use strict';
+
+  const _hoisted_1$3 = { class: "vui-accordion" };
+  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+    __name: "VuiAccordion",
+    props: {
+      modelValue: { default: void 0 },
+      multiple: { type: Boolean, default: false }
+    },
+    emits: ["update:modelValue"],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const emit = __emit;
+      const internalValue = vue.ref(
+        props.multiple ? [] : null
+      );
+      const isControlled = vue.computed(() => props.modelValue !== void 0);
+      const active = vue.computed({
+        get() {
+          return isControlled.value ? props.modelValue : internalValue.value;
+        },
+        set(val) {
+          if (isControlled.value) {
+            emit("update:modelValue", val);
+          } else {
+            internalValue.value = val ?? null;
+          }
+        }
+      });
+      function toggleItem(id) {
+        if (props.multiple) {
+          const current = Array.isArray(active.value) ? [...active.value] : [];
+          const index = current.indexOf(id);
+          if (index > -1) {
+            current.splice(index, 1);
+          } else {
+            current.push(id);
+          }
+          active.value = current;
+        } else {
+          active.value = active.value === id ? null : id;
+        }
+      }
+      vue.provide("vuiAccordion", {
+        active,
+        toggleItem,
+        multiple: props.multiple
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
+          vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ]);
+      };
+    }
+  });
+
+  const _export_sfc = (sfc, props) => {
+    const target = sfc.__vccOpts || sfc;
+    for (const [key, val] of props) {
+      target[key] = val;
+    }
+    return target;
+  };
+
+  const VuiAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-b0532c49"]]);
+
+  const _hoisted_1$2 = ["aria-valuenow"];
+  const _hoisted_2$2 = {
+    key: 1,
+    class: "vui-progressbar-fill"
+  };
+  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+    __name: "VuiProgressBar",
+    props: {
+      modelValue: {
+        type: Number,
+        default: 0
+      },
+      indeterminate: Boolean,
+      variant: {
+        type: String,
+        default: "primary"
+      },
+      size: {
+        type: String,
+        default: "md"
+      },
+      striped: Boolean,
+      animated: Boolean
+    },
+    emits: ["update:modelValue"],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const normalizedValue = vue.computed(() => {
+        return Math.min(Math.max(props.modelValue, 0), 100);
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: vue.normalizeClass(["vui-progressbar", [
+            `vui-progressbar--size-${__props.size}`,
+            `vui-progressbar--${__props.variant}`,
+            { "vui-progressbar--indeterminate": __props.indeterminate },
+            { "vui-progressbar--striped": __props.striped },
+            { "vui-progressbar--animated": __props.animated }
+          ]]),
+          role: "progressbar",
+          "aria-valuenow": !__props.indeterminate ? __props.modelValue : void 0,
+          "aria-valuemin": "0",
+          "aria-valuemax": "100"
+        }, [
+          !__props.indeterminate ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: "vui-progressbar-fill",
+            style: vue.normalizeStyle({ width: normalizedValue.value + "%" })
+          }, null, 4)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$2))
+        ], 10, _hoisted_1$2);
+      };
+    }
+  });
+
+  const VuiProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-551d3aec"]]);
+
+  const _hoisted_1$1 = {
+    key: 0,
+    class: "vui-meter-bar-bg"
+  };
+  const _hoisted_2$1 = {
+    key: 1,
+    class: "vui-meter-bar-bg vertical"
+  };
+  const _hoisted_3 = ["viewBox"];
+  const _hoisted_4 = ["cy"];
+  const _hoisted_5 = ["cy"];
+  const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+    __name: "VuiStatusMeter",
+    props: {
+      modelValue: {
+        type: Number,
+        default: 0
+      },
+      variant: {
+        type: String,
+        default: "horizontal"
+      },
+      color: {
+        type: String,
+        default: "primary"
+      },
+      size: {
+        type: String,
+        default: "md"
+      },
+      thickness: {
+        type: Number,
+        default: 8
+      },
+      max: {
+        type: Number,
+        default: 100
+      }
+    },
+    emits: ["update:modelValue"],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const normalizedValue = vue.computed(() => {
+        const v = Math.min(props.modelValue, props.max);
+        return v / props.max * 100;
+      });
+      const colorClass = vue.computed(() => `vui-meter--${props.color}`);
+      const variantClass = vue.computed(() => `vui-meter--${props.variant}`);
+      const circumference = 2 * Math.PI * 45;
+      const offset = vue.computed(() => {
+        if (props.variant === "semi") {
+          const semiCirc = Math.PI * 45;
+          return semiCirc * (1 - normalizedValue.value / 100);
+        }
+        return circumference * (1 - normalizedValue.value / 100);
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: vue.normalizeClass(["vui-meter", [variantClass.value, colorClass.value, `vui-meter--size-${__props.size}`]])
+        }, [
+          props.variant === "horizontal" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
+            vue.createElementVNode("div", {
+              class: "vui-meter-bar-fg",
+              style: vue.normalizeStyle({ width: normalizedValue.value + "%" })
+            }, null, 4)
+          ])) : vue.createCommentVNode("", true),
+          props.variant === "vertical" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$1, [
+            vue.createElementVNode("div", {
+              class: "vui-meter-bar-fg",
+              style: vue.normalizeStyle({ height: normalizedValue.value + "%" })
+            }, null, 4)
+          ])) : vue.createCommentVNode("", true),
+          props.variant === "circular" || props.variant === "semi" ? (vue.openBlock(), vue.createElementBlock("svg", {
+            key: 2,
+            class: "vui-meter-svg",
+            viewBox: props.variant === "circular" ? "0 0 100 100" : "0 0 100 50"
+          }, [
+            vue.createElementVNode("circle", {
+              class: "vui-meter-bg-circle",
+              cx: "50",
+              cy: props.variant === "circular" ? 50 : 50,
+              r: "45"
+            }, null, 8, _hoisted_4),
+            vue.createElementVNode("circle", {
+              class: vue.normalizeClass(["vui-meter-fg-circle", variantClass.value]),
+              cx: "50",
+              cy: props.variant === "circular" ? 50 : 50,
+              r: "45",
+              style: vue.normalizeStyle({
+                strokeDasharray: circumference,
+                strokeDashoffset: offset.value
+              })
+            }, null, 14, _hoisted_5)
+          ], 8, _hoisted_3)) : vue.createCommentVNode("", true)
+        ], 2);
+      };
+    }
+  });
+
+  const _hoisted_1 = {
+    key: 0,
+    class: "vui-badge__icon"
+  };
+  const _hoisted_2 = { class: "vui-badge__label" };
+  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+    __name: "VuiBadge",
+    props: {
+      type: {
+        type: String,
+        default: "info"
+      },
+      variant: {
+        type: String,
+        default: "solid"
+      },
+      size: {
+        type: String,
+        default: "md"
+      },
+      rounded: {
+        type: Boolean,
+        default: true
+      }
+    },
+    setup(__props) {
+      const props = __props;
+      const classes = vue.computed(() => [
+        "vui-badge",
+        `vui-badge--${props.type}`,
+        `vui-badge--${props.variant}`,
+        `vui-badge--${props.size}`,
+        { "vui-badge--rounded": props.rounded }
+      ]);
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("span", {
+          class: vue.normalizeClass(classes.value)
+        }, [
+          _ctx.$slots.icon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, [
+            vue.renderSlot(_ctx.$slots, "icon")
+          ])) : vue.createCommentVNode("", true),
+          vue.createElementVNode("span", _hoisted_2, [
+            vue.renderSlot(_ctx.$slots, "default")
+          ])
+        ], 2);
+      };
+    }
+  });
+
+  const index = {
+    install(app) {
+      app.component("VuiBadge", _sfc_main);
+    }
+  };
+
+  exports.VuiAccordion = VuiAccordion;
+  exports.VuiBadge = _sfc_main;
+  exports.VuiProgressBar = VuiProgressBar;
+  exports.VuiStatusMeter = _sfc_main$1;
+  exports.default = index;
+
+  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+}));

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "vui-toolkit",
+  "private": false,
+  "type": "module",
+  "version": "0.0.1",
+  "main": "./dist/vui-toolkit.umd.cjs",
+  "module": "./dist/vui-toolkit.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/vui-toolkit.es.js",
+      "require": "./dist/vui-toolkit.umd.js"
+    },
+    "./dist/vui-toolkit.css": "./dist/vui-toolkit.css"
+  },
+
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "types": "vue-tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "build": "rm -rf dist && vite build && npm run types",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "@vue/tsconfig": "^0.8.1",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1",
+    "vue-tsc": "^3.1.5"
+  }
+}