vui-toolkit 0.0.1

package/dist/components/taskList.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    tasks: any[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggleDone: (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggleDone?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/composables/useVuiBanner.d.ts

@@ -0,0 +1,22 @@
+import type { VuiBannerType } from '../components/VuiBanner.vue';
+export interface VuiBannerItem {
+    id: number;
+    type?: VuiBannerType;
+    message: string;
+    dismissible?: boolean;
+}
+export declare function useVuiBanner(): {
+    banners: import("vue").Ref<{
+        id: number;
+        type?: VuiBannerType | undefined;
+        message: string;
+        dismissible?: boolean | undefined;
+    }[], VuiBannerItem[] | {
+        id: number;
+        type?: VuiBannerType | undefined;
+        message: string;
+        dismissible?: boolean | undefined;
+    }[]>;
+    addBanner: (options: Omit<VuiBannerItem, "id">) => void;
+    removeBanner: (id: number) => void;
+};

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { default as VuiAccordion } from './components/VuiAccordion.vue';
+export { default as VuiProgressBar } from './components/VuiProgressBar.vue';
+export { default as VuiStatusMeter } from './components/VuiStatusMeter.vue';
+import VuiBadge from './components/VuiBadge.vue';
+export { VuiBadge };
+declare const _default: {
+    install(app: any): void;
+};
+export default _default;

package/dist/main.d.ts

@@ -0,0 +1 @@
+import './style.css';

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/dist/vui-toolkit.css

@@ -0,0 +1,270 @@
+
+.vui-accordion[data-v-b0532c49] {
+  border-radius: 6px;
+}
+
+.vui-progressbar[data-v-551d3aec] {
+  background: var(--vui-progress-bg);
+  border-radius: 6px;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Sizes */
+.vui-progressbar--size-sm[data-v-551d3aec] {
+  height: var(--vui-progress-height-sm);
+}
+.vui-progressbar--size-md[data-v-551d3aec] {
+  height: var(--vui-progress-height-md);
+}
+.vui-progressbar--size-lg[data-v-551d3aec] {
+  height: var(--vui-progress-height-lg);
+}
+
+/* Fill */
+.vui-progressbar-fill[data-v-551d3aec] {
+  height: 100%;
+  background: currentColor;
+  transition: width var(--vui-progress-transition);
+}
+
+/* Variants (color via currentColor) */
+.vui-progressbar--primary[data-v-551d3aec] {
+  color: var(--vui-progress-primary);
+}
+.vui-progressbar--success[data-v-551d3aec] {
+  color: var(--vui-progress-success);
+}
+.vui-progressbar--warning[data-v-551d3aec] {
+  color: var(--vui-progress-warning);
+}
+.vui-progressbar--error[data-v-551d3aec] {
+  color: var(--vui-progress-error);
+}
+
+/* Striped Background */
+.vui-progressbar--striped .vui-progressbar-fill[data-v-551d3aec] {
+  background-image: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: 1rem 1rem;
+}
+
+/* Animated Stripes */
+.vui-progressbar--animated .vui-progressbar-fill[data-v-551d3aec] {
+  animation: vui-progress-stripes-551d3aec 1s linear infinite;
+}
+@keyframes vui-progress-stripes-551d3aec {
+0% {
+    background-position: 1rem 0;
+}
+100% {
+    background-position: 0 0;
+}
+}
+
+/* Indeterminate */
+.vui-progressbar--indeterminate[data-v-551d3aec] {
+  overflow: hidden;
+}
+.vui-progressbar--indeterminate .vui-progressbar-fill[data-v-551d3aec] {
+  width: 50%;
+  position: absolute;
+  animation: vui-progress-indeterminate-551d3aec 2s infinite ease;
+}
+@keyframes vui-progress-indeterminate-551d3aec {
+0% {
+    left: -50%;
+}
+50% {
+    left: 25%;
+}
+100% {
+    left: 100%;
+}
+}
+
+:root {
+  --vui-meter-bg: #e5e7eb;
+  --vui-meter-primary: #2e7d8f;
+  --vui-meter-success: #4caf50;
+  --vui-meter-warning: #ff9800;
+  --vui-meter-error:   #f44336;
+  --vui-meter-transition: 0.6s ease;
+}
+.vui-meter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* BAR BASE */
+.vui-meter-bar-bg {
+  background: var(--vui-meter-bg);
+  width: 100%;
+  height: var(--vui-meter-thickness, 8px);
+  border-radius: 4px;
+  overflow: hidden;
+}
+.vui-meter-bar-bg.vertical {
+  width: var(--vui-meter-thickness, 8px);
+  height: 100px;
+  display: flex;
+  flex-direction: column-reverse;
+}
+.vui-meter-bar-fg {
+  background: currentColor;
+  height: 100%;
+  transition: width var(--vui-meter-transition),
+              height var(--vui-meter-transition);
+}
+
+/* CIRCLE BASE */
+.vui-meter-svg {
+  width: 100px;
+  height: 100px;
+}
+.vui-meter-bg-circle {
+  fill: none;
+  stroke: var(--vui-meter-bg);
+  stroke-width: var(--vui-meter-thickness, 8);
+}
+.vui-meter-fg-circle {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: var(--vui-meter-thickness, 8);
+  transform: rotate(-90deg);
+  transform-origin: center;
+  transition: stroke-dashoffset var(--vui-meter-transition);
+}
+
+/* COLORS */
+.vui-meter--primary {
+  color: var(--vui-meter-primary);
+}
+.vui-meter--success {
+  color: var(--vui-meter-success);
+}
+.vui-meter--warning {
+  color: var(--vui-meter-warning);
+}
+.vui-meter--error {
+  color: var(--vui-meter-error);
+}
+
+/* SIZES */
+.vui-meter--size-sm .vui-meter-svg {
+  width: 60px;
+  height: 60px;
+}
+.vui-meter--size-md .vui-meter-svg {
+  width: 100px;
+  height: 100px;
+}
+.vui-meter--size-lg .vui-meter-svg {
+  width: 140px;
+  height: 140px;
+}
+
+
+:root {
+  /* Info */
+  --vui-info-bg: #1e66f5;
+  --vui-info-text: #ffffff;
+
+  /* Success */
+  --vui-success-bg: #4caf50;
+  --vui-success-text: #ffffff;
+
+  /* Warning */
+  --vui-warning-bg: #ff9800;
+  --vui-warning-text: #ffffff;
+
+  /* Error */
+  --vui-error-bg: #f44336;
+  --vui-error-text: #ffffff;
+
+  /* Neutral */
+  --vui-neutral-bg: #9e9e9e;
+  --vui-neutral-text: #ffffff;
+
+  /* Soft variant */
+  --vui-soft-bg: rgba(0, 0, 0, 0.05);
+}
+.vui-badge {
+  --vui-badge-radius: 999px;
+  --vui-badge-font-size: 13px;
+  --vui-badge-padding-x: 12px;
+  --vui-badge-padding-y: 4px;
+
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--vui-badge-font-size);
+  font-weight: 500;
+  padding: var(--vui-badge-padding-y) var(--vui-badge-padding-x);
+  border-radius: var(--vui-badge-radius);
+  border: 1px solid transparent;
+  transition: all 0.2s ease;
+}
+
+/* Rounded toggle */
+.vui-badge--rounded {
+  border-radius: 999px;
+}
+
+/* Sizes */
+.vui-badge--sm {
+  font-size: 12px;
+  padding: 2px 8px;
+}
+.vui-badge--lg {
+  font-size: 14px;
+  padding: 6px 14px;
+}
+
+/* SOLID */
+.vui-badge--solid.vui-badge--info {
+  background: var(--vui-info-bg);
+  color: var(--vui-info-text);
+}
+.vui-badge--solid.vui-badge--success {
+  background: var(--vui-success-bg);
+  color: var(--vui-success-text);
+}
+.vui-badge--solid.vui-badge--warning {
+  background: var(--vui-warning-bg);
+  color: var(--vui-warning-text);
+}
+.vui-badge--solid.vui-badge--error {
+  background: var(--vui-error-bg);
+  color: var(--vui-error-text);
+}
+.vui-badge--solid.vui-badge--neutral {
+  background: var(--vui-neutral-bg);
+  color: var(--vui-neutral-text);
+}
+
+/* SOFT */
+.vui-badge--soft {
+  background: var(--vui-soft-bg);
+}
+
+/* OUTLINE */
+.vui-badge--outline {
+  background: transparent;
+  border-color: currentColor;
+}
+
+/* Icon */
+.vui-badge__icon {
+  display: inline-flex;
+  align-items: center;
+}

package/dist/vui-toolkit.es.js

@@ -0,0 +1,277 @@
+import { defineComponent, ref, computed, provide, openBlock, createElementBlock, renderSlot, normalizeClass, normalizeStyle, createElementVNode, createCommentVNode } from 'vue';
+
+const _hoisted_1$3 = { class: "vui-accordion" };
+const _sfc_main$3 = /* @__PURE__ */ 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 = ref(
+      props.multiple ? [] : null
+    );
+    const isControlled = computed(() => props.modelValue !== void 0);
+    const active = 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;
+      }
+    }
+    provide("vuiAccordion", {
+      active,
+      toggleItem,
+      multiple: props.multiple
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
+        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__ */ 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 = computed(() => {
+      return Math.min(Math.max(props.modelValue, 0), 100);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: 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 ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "vui-progressbar-fill",
+          style: normalizeStyle({ width: normalizedValue.value + "%" })
+        }, null, 4)) : (openBlock(), 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__ */ 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 = computed(() => {
+      const v = Math.min(props.modelValue, props.max);
+      return v / props.max * 100;
+    });
+    const colorClass = computed(() => `vui-meter--${props.color}`);
+    const variantClass = computed(() => `vui-meter--${props.variant}`);
+    const circumference = 2 * Math.PI * 45;
+    const offset = 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 openBlock(), createElementBlock("div", {
+        class: normalizeClass(["vui-meter", [variantClass.value, colorClass.value, `vui-meter--size-${__props.size}`]])
+      }, [
+        props.variant === "horizontal" ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
+          createElementVNode("div", {
+            class: "vui-meter-bar-fg",
+            style: normalizeStyle({ width: normalizedValue.value + "%" })
+          }, null, 4)
+        ])) : createCommentVNode("", true),
+        props.variant === "vertical" ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
+          createElementVNode("div", {
+            class: "vui-meter-bar-fg",
+            style: normalizeStyle({ height: normalizedValue.value + "%" })
+          }, null, 4)
+        ])) : createCommentVNode("", true),
+        props.variant === "circular" || props.variant === "semi" ? (openBlock(), createElementBlock("svg", {
+          key: 2,
+          class: "vui-meter-svg",
+          viewBox: props.variant === "circular" ? "0 0 100 100" : "0 0 100 50"
+        }, [
+          createElementVNode("circle", {
+            class: "vui-meter-bg-circle",
+            cx: "50",
+            cy: props.variant === "circular" ? 50 : 50,
+            r: "45"
+          }, null, 8, _hoisted_4),
+          createElementVNode("circle", {
+            class: normalizeClass(["vui-meter-fg-circle", variantClass.value]),
+            cx: "50",
+            cy: props.variant === "circular" ? 50 : 50,
+            r: "45",
+            style: normalizeStyle({
+              strokeDasharray: circumference,
+              strokeDashoffset: offset.value
+            })
+          }, null, 14, _hoisted_5)
+        ], 8, _hoisted_3)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+
+const _hoisted_1 = {
+  key: 0,
+  class: "vui-badge__icon"
+};
+const _hoisted_2 = { class: "vui-badge__label" };
+const _sfc_main = /* @__PURE__ */ 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 = computed(() => [
+      "vui-badge",
+      `vui-badge--${props.type}`,
+      `vui-badge--${props.variant}`,
+      `vui-badge--${props.size}`,
+      { "vui-badge--rounded": props.rounded }
+    ]);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(classes.value)
+      }, [
+        _ctx.$slots.icon ? (openBlock(), createElementBlock("span", _hoisted_1, [
+          renderSlot(_ctx.$slots, "icon")
+        ])) : createCommentVNode("", true),
+        createElementVNode("span", _hoisted_2, [
+          renderSlot(_ctx.$slots, "default")
+        ])
+      ], 2);
+    };
+  }
+});
+
+const index = {
+  install(app) {
+    app.component("VuiBadge", _sfc_main);
+  }
+};
+
+export { VuiAccordion, _sfc_main as VuiBadge, VuiProgressBar, _sfc_main$1 as VuiStatusMeter, index as default };