@maltjoy/core-vue 1.0.0-alpha.1.1

package/README.md

@@ -0,0 +1,17 @@
+# @maltjoy/core-vue
+
+Vue version of [@maltjoy/core](https://www.npmjs.com/package/@maltjoy/core) package.
+
+In order to inherit from all [@maltjoy/themes](https://www.npmjs.com/package/@maltjoy/themes) custom properties, you will need to import as well the default theme:
+
+> If you already use @maltjoy/core in your project, it already include the theme.
+
+```
+npm install @maltjoy/themes
+```
+
+Then import the CSS : 
+
+```css
+@use '@maltjoy/themes/dist/themes/default.css';
+```

package/dist/components/JoyButton/JoyButton.types.d.ts

@@ -0,0 +1,13 @@
+import { GENERIC_VARIANTS, SIZES } from '../../types';
+/** BUTTON VARIANTS/COLORS */
+declare const BUTTONS_SPECIFIC_VARIANTS: readonly ["main", "admin", "white", "ghost"];
+export declare const BUTTON_VARIANTS: ((typeof GENERIC_VARIANTS)[number] | (typeof BUTTONS_SPECIFIC_VARIANTS)[number])[];
+export type ButtonVariants = (typeof BUTTON_VARIANTS)[number];
+/** BUTTON SIZES */
+export declare const BUTTON_SIZES: readonly ["xlarge", "large", "medium", "small", "xsmall", "xxsmall"];
+export type ButtonSizes = (typeof BUTTON_SIZES)[number];
+/** BUTTON ICON SIZES */
+type ButtonSpecificIconsSizes = Exclude<(typeof SIZES)[number], 'xlarge' | 'large' | 'medium'>;
+export declare const ICON_SIZES: ButtonSpecificIconsSizes[];
+export type IconSizes = (typeof ICON_SIZES)[number];
+export {};

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

@@ -0,0 +1,95 @@
+import { ButtonSizes, ButtonVariants, IconSizes } from "./JoyButton.types";
+import { PropType } from "vue";
+declare const _sfc_main: import("vue").DefineComponent<{
+    /**
+     * If you only need a button with an icon. To keep your component accessible, you can give a text as slot, it will be used as title and aria-label.
+     * This property takes effect only if icon property is set
+     */
+    circle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Name of the icon, placed before the text */
+    icon: StringConstructor;
+    /** Change the component's state and display a JoySpinner. */
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Button or Link color variant */
+    variant: {
+        type: PropType<"primary" | "secondary" | "main" | "admin" | "white" | "ghost">;
+        default: string;
+        validator(variant: ButtonVariants): boolean;
+    };
+    /** Button or Link size */
+    size: {
+        type: PropType<"xlarge" | "large" | "medium" | "small" | "xsmall" | "xxsmall">;
+        default: string;
+        validator(variant: ButtonSizes): boolean;
+    };
+    /** Override the icon size. Default to xsmall */
+    iconSize: {
+        type: PropType<"small" | "xsmall" | "xxsmall">;
+        default: string;
+        validator(iconSize: IconSizes): boolean;
+    };
+}, {
+    props: any;
+    attrs: {
+        [x: string]: unknown;
+    };
+    spinnerColor: import("vue").ComputedRef<"white" | "teal">;
+    JoySpinner: import("vue").DefineComponent<{
+        color: {
+            type: PropType<"white" | "teal">;
+            validator(color: "white" | "teal"): boolean;
+        };
+    }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        color: {
+            type: PropType<"white" | "teal">;
+            validator(color: "white" | "teal"): boolean;
+        };
+    }>>, {}>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * If you only need a button with an icon. To keep your component accessible, you can give a text as slot, it will be used as title and aria-label.
+     * This property takes effect only if icon property is set
+     */
+    circle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Name of the icon, placed before the text */
+    icon: StringConstructor;
+    /** Change the component's state and display a JoySpinner. */
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Button or Link color variant */
+    variant: {
+        type: PropType<"primary" | "secondary" | "main" | "admin" | "white" | "ghost">;
+        default: string;
+        validator(variant: ButtonVariants): boolean;
+    };
+    /** Button or Link size */
+    size: {
+        type: PropType<"xlarge" | "large" | "medium" | "small" | "xsmall" | "xxsmall">;
+        default: string;
+        validator(variant: ButtonSizes): boolean;
+    };
+    /** Override the icon size. Default to xsmall */
+    iconSize: {
+        type: PropType<"small" | "xsmall" | "xxsmall">;
+        default: string;
+        validator(iconSize: IconSizes): boolean;
+    };
+}>>, {
+    circle: boolean;
+    loading: boolean;
+    variant: "primary" | "secondary" | "main" | "admin" | "white" | "ghost";
+    size: "xlarge" | "large" | "medium" | "small" | "xsmall" | "xxsmall";
+    iconSize: "small" | "xsmall" | "xxsmall";
+}>;
+export default _sfc_main;

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

@@ -0,0 +1,142 @@
+import { PropType } from "vue";
+declare const _sfc_main: import("vue").DefineComponent<{
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: StringConstructor;
+    invalid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    labelSize: PropType<"large" | "medium" | "small">;
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * For accessibility purpose, the name is required. it will be mapped to the input ID, and the label "for" attribute as well.
+     */
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    optionalLabel: StringConstructor;
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    requiredMark: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: StringConstructor;
+    unit: StringConstructor;
+}, {
+    emit: (event: "update:modelValue", ...args: any[]) => void;
+    props: any;
+    input: import("vue").Ref<HTMLInputElement | undefined>;
+    root: import("vue").Ref<HTMLElement | undefined>;
+    attrs: {
+        [x: string]: unknown;
+    };
+    slots: Readonly<{
+        [name: string]: import("vue").Slot | undefined;
+    }>;
+    isFocusing: import("vue").Ref<boolean>;
+    showClearableIcon: import("vue").ComputedRef<boolean>;
+    hasDefaultSlot: import("vue").ComputedRef<import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[] | undefined>;
+    withinJoyWrapper: import("vue").ComputedRef<boolean>;
+    inputType: import("vue").Ref<string | undefined>;
+    eventHandlers: {
+        onFocus: () => void;
+        onBlur: () => void;
+        onInput: (e: Event) => void;
+        clearValue: () => void;
+    };
+    JoyLabel: import("vue").DefineComponent<{
+        size: {
+            type: PropType<"large" | "medium" | "small">;
+            default: string;
+            validator(size: "large" | "medium" | "small"): boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        optionalLabel: {
+            type: StringConstructor;
+        };
+    }, {
+        props: any;
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        size: {
+            type: PropType<"large" | "medium" | "small">;
+            default: string;
+            validator(size: "large" | "medium" | "small"): boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        optionalLabel: {
+            type: StringConstructor;
+        };
+    }>>, {
+        size: "large" | "medium" | "small";
+        required: boolean;
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: StringConstructor;
+    invalid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    labelSize: PropType<"large" | "medium" | "small">;
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * For accessibility purpose, the name is required. it will be mapped to the input ID, and the label "for" attribute as well.
+     */
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    optionalLabel: StringConstructor;
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    requiredMark: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: StringConstructor;
+    unit: StringConstructor;
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    size: string;
+    clearable: boolean;
+    invalid: boolean;
+    modelValue: string;
+    required: boolean;
+    requiredMark: boolean;
+}>;
+export default _sfc_main;

package/dist/components/JoyLabel/JoyLabel.types.d.ts

@@ -0,0 +1,3 @@
+/** LABEL SIZES */
+export declare const LABEL_SIZES: readonly ["small", "medium", "large"];
+export type LabelSizes = (typeof LABEL_SIZES)[number];

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

@@ -0,0 +1,35 @@
+import { PropType } from "vue";
+import { LabelSizes } from "./JoyLabel.types";
+declare const _sfc_main: import("vue").DefineComponent<{
+    size: {
+        type: PropType<"large" | "medium" | "small">;
+        default: string;
+        validator(size: LabelSizes): boolean;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    optionalLabel: {
+        type: StringConstructor;
+    };
+}, {
+    props: any;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: PropType<"large" | "medium" | "small">;
+        default: string;
+        validator(size: LabelSizes): boolean;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    optionalLabel: {
+        type: StringConstructor;
+    };
+}>>, {
+    size: "large" | "medium" | "small";
+    required: boolean;
+}>;
+export default _sfc_main;

package/dist/components/JoySpinner/JoySpinner.types.d.ts

@@ -0,0 +1,2 @@
+export declare const SPINNER_COLORS: readonly ["teal", "white"];
+export type SpinnerColors = (typeof SPINNER_COLORS)[number];

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

@@ -0,0 +1,14 @@
+import { PropType } from "vue";
+import { SpinnerColors } from "./JoySpinner.types";
+declare const _sfc_main: import("vue").DefineComponent<{
+    color: {
+        type: PropType<"white" | "teal">;
+        validator(color: SpinnerColors): boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    color: {
+        type: PropType<"white" | "teal">;
+        validator(color: SpinnerColors): boolean;
+    };
+}>>, {}>;
+export default _sfc_main;

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

@@ -0,0 +1,42 @@
+import { PropType } from 'vue';
+declare const _sfc_main: import("vue").DefineComponent<{
+    justify: {
+        type: PropType<"center" | "space-between" | "flex-start" | "flex-end">;
+        default: string;
+    };
+    align: {
+        type: PropType<"center" | "flex-start" | "flex-end" | "stretch">;
+        default: string;
+    };
+    direction: {
+        type: PropType<"row" | "column">;
+        default: string;
+    };
+    wrap: {
+        type: PropType<"nowrap" | "wrap">;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    justify: {
+        type: PropType<"center" | "space-between" | "flex-start" | "flex-end">;
+        default: string;
+    };
+    align: {
+        type: PropType<"center" | "flex-start" | "flex-end" | "stretch">;
+        default: string;
+    };
+    direction: {
+        type: PropType<"row" | "column">;
+        default: string;
+    };
+    wrap: {
+        type: PropType<"nowrap" | "wrap">;
+        default: string;
+    };
+}>>, {
+    wrap: "nowrap" | "wrap";
+    justify: "center" | "space-between" | "flex-start" | "flex-end";
+    align: "center" | "flex-start" | "flex-end" | "stretch";
+    direction: "row" | "column";
+}>;
+export default _sfc_main;

package/dist/components/index.d.ts

@@ -0,0 +1,6 @@
+import JoyButton from '../components/JoyButton/JoyButton.vue';
+import JoySpinner from '../components/JoySpinner/JoySpinner.vue';
+import JoyInput from '../components/JoyInput/JoyInput.vue';
+import JoyLabel from '../components/JoyLabel/JoyLabel.vue';
+import JoyWrapper from '../components/JoyWrapper/JoyWrapper.vue';
+export { JoyButton, JoyInput, JoyLabel, JoySpinner, JoyWrapper };

package/dist/components/main.d.ts

@@ -0,0 +1,5 @@
+import type { App } from 'vue';
+declare const _default: {
+    install: (app: App) => void;
+};
+export default _default;

package/dist/joy-vue.js

@@ -0,0 +1,318 @@
+import { defineComponent as _, openBlock as a, createElementBlock as r, normalizeClass as y, useAttrs as $, computed as v, createBlock as I, resolveDynamicComponent as L, unref as l, withCtx as J, createCommentVNode as c, createElementVNode as S, renderSlot as g, mergeProps as x, toDisplayString as N, ref as m, useSlots as E, onBeforeMount as q } from "vue";
+const T = ["teal", "white"], A = /* @__PURE__ */ _({
+  __name: "JoySpinner",
+  props: {
+    color: {
+      type: String,
+      validator(e) {
+        return T.includes(e);
+      }
+    }
+  },
+  setup(e) {
+    return (n, t) => (a(), r("div", {
+      class: y(["joy-spinner", `joy-spinner_${e.color}`])
+    }, null, 2));
+  }
+});
+const b = (e, n) => {
+  const t = e.__vccOpts || e;
+  for (const [p, s] of n)
+    t[p] = s;
+  return t;
+}, z = /* @__PURE__ */ b(A, [["__scopeId", "data-v-e97b61a5"]]), O = ["primary", "secondary"], F = ["xlarge", "large", "medium", "small", "xsmall", "xxsmall"], R = ["main", "admin", "white", "ghost"], W = [
+  ...O,
+  ...R
+], Z = [...F], D = ["xxsmall", "xsmall", "small"], M = ["name", "size"], P = { class: "joy-button--slot" }, U = /* @__PURE__ */ _({
+  __name: "JoyButton",
+  props: {
+    /**
+     * If you only need a button with an icon. To keep your component accessible, you can give a text as slot, it will be used as title and aria-label.
+     * This property takes effect only if icon property is set
+     */
+    circle: {
+      type: Boolean,
+      default: !1
+    },
+    /** Name of the icon, placed before the text */
+    icon: String,
+    /** Change the component's state and display a JoySpinner. */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /** Button or Link color variant */
+    variant: {
+      type: String,
+      default: "primary",
+      validator(e) {
+        return W.includes(e);
+      }
+    },
+    /** Button or Link size */
+    size: {
+      type: String,
+      default: "medium",
+      validator(e) {
+        return Z.includes(e);
+      }
+    },
+    /** Override the icon size. Default to xsmall */
+    iconSize: {
+      type: String,
+      default: "xsmall",
+      validator(e) {
+        return D.includes(e);
+      }
+    }
+  },
+  setup(e) {
+    const n = e, t = $(), p = v(() => ["white", "ghost", "secondary"].includes(n.variant) ? "teal" : "white");
+    return (s, f) => (a(), I(L(l(t).href ? "a" : "button"), {
+      disabled: e.loading || l(t).disabled,
+      class: y([
+        "joy-button",
+        `joy-button_${e.variant}`,
+        `joy-button_${e.size}`,
+        {
+          "joy-button_circle": n.circle,
+          "joy-button_loading": n.loading
+        }
+      ])
+    }, {
+      default: J(() => [
+        e.icon ? (a(), r("joy-icon", {
+          key: 0,
+          name: e.icon,
+          size: e.iconSize,
+          lazy: !1
+        }, null, 8, M)) : c("", !0),
+        e.loading ? (a(), I(z, {
+          key: 1,
+          color: l(p)
+        }, null, 8, ["color"])) : c("", !0),
+        S("span", P, [
+          g(s.$slots, "default", {}, void 0, !0)
+        ])
+      ]),
+      _: 3
+    }, 8, ["disabled", "class"]));
+  }
+});
+const G = /* @__PURE__ */ b(U, [["__scopeId", "data-v-107b2043"]]), H = ["small", "medium", "large"], K = {
+  key: 0,
+  class: "joy-label-required"
+}, Q = {
+  key: 1,
+  class: "joy-label-optional"
+}, X = /* @__PURE__ */ _({
+  __name: "JoyLabel",
+  props: {
+    size: {
+      type: String,
+      default: "medium",
+      validator(e) {
+        return H.includes(e);
+      }
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    optionalLabel: {
+      type: String
+    }
+  },
+  setup(e) {
+    const n = e;
+    return (t, p) => (a(), r("label", x({
+      class: ["joy-label", `joy-label--${e.size}`]
+    }, t.$attrs), [
+      g(t.$slots, "default", {}, void 0, !0),
+      n.required ? (a(), r("span", K, "*")) : c("", !0),
+      n.optionalLabel ? (a(), r("span", Q, " - " + N(n.optionalLabel), 1)) : c("", !0)
+    ], 16));
+  }
+});
+const h = /* @__PURE__ */ b(X, [["__scopeId", "data-v-21392cc3"]]), Y = ["id", "type", "value"], ee = ["data-unit"], te = /* @__PURE__ */ _({
+  __name: "JoyInput",
+  props: {
+    clearable: {
+      type: Boolean,
+      default: !1
+    },
+    icon: String,
+    invalid: {
+      type: Boolean,
+      default: !1
+    },
+    labelSize: String,
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    /**
+     * For accessibility purpose, the name is required. it will be mapped to the input ID, and the label "for" attribute as well.
+     */
+    name: {
+      type: String,
+      required: !0
+    },
+    optionalLabel: String,
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    requiredMark: {
+      type: Boolean,
+      default: !1
+    },
+    size: {
+      type: String,
+      default: "medium"
+    },
+    type: String,
+    unit: String
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: n }) {
+    const t = e, p = m(), s = m(), f = $(), w = E(), j = m(!1), k = v(() => t.clearable && t.modelValue.length > 0 && !t.unit), V = v(() => w.default && w.default()), C = v(() => {
+      var u, o;
+      return !!((u = s.value) != null && u.closest("joy-wrapper")) || !!((o = s.value) != null && o.closest(".joy-wrapper"));
+    }), B = m(t.type);
+    q(() => {
+      B.value = t.unit ? "number" : t.unit || "text";
+    });
+    const i = {
+      onFocus: () => {
+        j.value = !0;
+      },
+      onBlur: () => {
+        j.value = !1;
+      },
+      onInput: (u) => {
+        let o = u.target.value;
+        n("update:modelValue", o);
+      },
+      clearValue: () => {
+        n("update:modelValue", "");
+      }
+    };
+    return (u, o) => (a(), r("div", {
+      ref_key: "root",
+      ref: s,
+      class: y([`joy-input--${t.size}`])
+    }, [
+      S("div", {
+        class: y([
+          "joy-input",
+          {
+            "joy-input--focusing": j.value,
+            "joy-input--disabled": l(f).disabled,
+            "joy-input--invalid": t.invalid,
+            "joy-input--valid": !t.invalid && !l(f).disabled
+          }
+        ])
+      }, [
+        l(V) ? (a(), I(h, {
+          key: 0,
+          for: t.name,
+          required: t.required && t.requiredMark,
+          "optional-label": e.optionalLabel,
+          size: e.labelSize
+        }, {
+          default: J(() => [
+            g(u.$slots, "default", {}, void 0, !0)
+          ]),
+          _: 3
+        }, 8, ["for", "required", "optional-label", "size"])) : c("", !0),
+        S("div", {
+          class: y([
+            "joy-input--wrapper",
+            {
+              "joy-input--wrapper-has-icon": !!t.icon,
+              "joy-input--wrapper---clearable": t.clearable,
+              "joy-input--wrapper-unit": !!t.unit,
+              "joy-input--wrapper-margin": !l(C)
+            }
+          ])
+        }, [
+          S("input", x(u.$attrs, {
+            id: t.name,
+            ref_key: "input",
+            ref: p,
+            class: [
+              {
+                "joy-input--field-disabled": l(f).disabled,
+                "joy-input--field-invalid": t.invalid
+              }
+            ],
+            type: B.value,
+            value: e.modelValue,
+            onFocus: o[0] || (o[0] = //@ts-ignore
+            (...d) => i.onFocus && i.onFocus(...d)),
+            onBlur: o[1] || (o[1] = //@ts-ignore
+            (...d) => i.onBlur && i.onBlur(...d)),
+            onInput: o[2] || (o[2] = //@ts-ignore
+            (...d) => i.onInput && i.onInput(...d))
+          }), null, 16, Y),
+          l(k) ? (a(), r("joy-icon", {
+            key: 0,
+            size: "xxsmall",
+            name: "cross",
+            class: "joy-input--clear",
+            onClick: o[3] || (o[3] = //@ts-ignore
+            (...d) => i.clearValue && i.clearValue(...d))
+          })) : c("", !0),
+          t.unit ? (a(), r("div", {
+            key: 1,
+            "data-unit": t.unit,
+            class: "joy-input--unit"
+          }, null, 8, ee)) : c("", !0)
+        ], 2)
+      ], 2)
+    ], 2));
+  }
+});
+const ne = /* @__PURE__ */ b(te, [["__scopeId", "data-v-2249f4f9"]]), oe = /* @__PURE__ */ _({
+  __name: "JoyWrapper",
+  props: {
+    justify: {
+      type: String,
+      default: "flex-start"
+    },
+    align: {
+      type: String,
+      default: "center"
+    },
+    direction: {
+      type: String,
+      default: "row"
+    },
+    wrap: {
+      type: String,
+      default: "wrap"
+    }
+  },
+  setup(e) {
+    return (n, t) => (a(), r("div", {
+      class: y([
+        "joy-wrapper",
+        `joy-wrapper--justify-${e.justify}`,
+        `joy-wrapper--align-${e.align}`,
+        `joy-wrapper--direction-${e.direction}`,
+        `joy-wrapper--wrap-${e.wrap}`
+      ])
+    }, [
+      g(n.$slots, "default")
+    ], 2));
+  }
+});
+const le = {
+  install: (e) => {
+    e.component("JoyButton", G), e.component("JoyInput", ne), e.component("JoyLabel", h), e.component("JoySpinner", z), e.component("JoyWrapper", oe);
+  }
+};
+export {
+  le as default
+};

package/dist/joy-vue.umd.cjs

@@ -0,0 +1 @@
+(function(e,d){typeof exports=="object"&&typeof module<"u"?module.exports=d(require("vue")):typeof define=="function"&&define.amd?define(["vue"],d):(e=typeof globalThis<"u"?globalThis:e||self,e["@maltjoy/core-vue"]=d(e.Vue))})(this,function(e){"use strict";const d=["teal","white"],g=e.defineComponent({__name:"JoySpinner",props:{color:{type:String,validator(t){return d.includes(t)}}},setup(t){return(o,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["joy-spinner",`joy-spinner_${t.color}`])},null,2))}}),P="",p=(t,o)=>{const n=t.__vccOpts||t;for(const[c,r]of o)n[c]=r;return n},m=p(g,[["__scopeId","data-v-e97b61a5"]]),B=["primary","secondary"],b=["xlarge","large","medium","small","xsmall","xxsmall"],j=["main","admin","white","ghost"],k=[...B,...j],C=[...b],w=["xxsmall","xsmall","small"],I=["name","size"],V={class:"joy-button--slot"},$=e.defineComponent({__name:"JoyButton",props:{circle:{type:Boolean,default:!1},icon:String,loading:{type:Boolean,default:!1},variant:{type:String,default:"primary",validator(t){return k.includes(t)}},size:{type:String,default:"medium",validator(t){return C.includes(t)}},iconSize:{type:String,default:"xsmall",validator(t){return w.includes(t)}}},setup(t){const o=t,n=e.useAttrs(),c=e.computed(()=>["white","ghost","secondary"].includes(o.variant)?"teal":"white");return(r,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(n).href?"a":"button"),{disabled:t.loading||e.unref(n).disabled,class:e.normalizeClass(["joy-button",`joy-button_${t.variant}`,`joy-button_${t.size}`,{"joy-button_circle":o.circle,"joy-button_loading":o.loading}])},{default:e.withCtx(()=>[t.icon?(e.openBlock(),e.createElementBlock("joy-icon",{key:0,name:t.icon,size:t.iconSize,lazy:!1},null,8,I)):e.createCommentVNode("",!0),t.loading?(e.openBlock(),e.createBlock(m,{key:1,color:e.unref(c)},null,8,["color"])):e.createCommentVNode("",!0),e.createElementVNode("span",V,[e.renderSlot(r.$slots,"default",{},void 0,!0)])]),_:3},8,["disabled","class"]))}}),W="",z=p($,[["__scopeId","data-v-107b2043"]]),E=["small","medium","large"],x={key:0,class:"joy-label-required"},N={key:1,class:"joy-label-optional"},h=e.defineComponent({__name:"JoyLabel",props:{size:{type:String,default:"medium",validator(t){return E.includes(t)}},required:{type:Boolean,default:!1},optionalLabel:{type:String}},setup(t){const o=t;return(n,c)=>(e.openBlock(),e.createElementBlock("label",e.mergeProps({class:["joy-label",`joy-label--${t.size}`]},n.$attrs),[e.renderSlot(n.$slots,"default",{},void 0,!0),o.required?(e.openBlock(),e.createElementBlock("span",x,"*")):e.createCommentVNode("",!0),o.optionalLabel?(e.openBlock(),e.createElementBlock("span",N," - "+e.toDisplayString(o.optionalLabel),1)):e.createCommentVNode("",!0)],16))}}),Z="",f=p(h,[["__scopeId","data-v-21392cc3"]]),J=["id","type","value"],L=["data-unit"],T=e.defineComponent({__name:"JoyInput",props:{clearable:{type:Boolean,default:!1},icon:String,invalid:{type:Boolean,default:!1},labelSize:String,modelValue:{type:String,default:""},name:{type:String,required:!0},optionalLabel:String,required:{type:Boolean,default:!1},requiredMark:{type:Boolean,default:!1},size:{type:String,default:"medium"},type:String,unit:String},emits:["update:modelValue"],setup(t,{emit:o}){const n=t,c=e.ref(),r=e.ref(),u=e.useAttrs(),_=e.useSlots(),y=e.ref(!1),O=e.computed(()=>n.clearable&&n.modelValue.length>0&&!n.unit),F=e.computed(()=>_.default&&_.default()),R=e.computed(()=>{var i,l;return!!((i=r.value)!=null&&i.closest("joy-wrapper"))||!!((l=r.value)!=null&&l.closest(".joy-wrapper"))}),S=e.ref(n.type);e.onBeforeMount(()=>{S.value=n.unit?"number":n.unit||"text"});const a={onFocus:()=>{y.value=!0},onBlur:()=>{y.value=!1},onInput:i=>{let l=i.target.value;o("update:modelValue",l)},clearValue:()=>{o("update:modelValue","")}};return(i,l)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"root",ref:r,class:e.normalizeClass([`joy-input--${n.size}`])},[e.createElementVNode("div",{class:e.normalizeClass(["joy-input",{"joy-input--focusing":y.value,"joy-input--disabled":e.unref(u).disabled,"joy-input--invalid":n.invalid,"joy-input--valid":!n.invalid&&!e.unref(u).disabled}])},[e.unref(F)?(e.openBlock(),e.createBlock(f,{key:0,for:n.name,required:n.required&&n.requiredMark,"optional-label":t.optionalLabel,size:t.labelSize},{default:e.withCtx(()=>[e.renderSlot(i.$slots,"default",{},void 0,!0)]),_:3},8,["for","required","optional-label","size"])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["joy-input--wrapper",{"joy-input--wrapper-has-icon":!!n.icon,"joy-input--wrapper---clearable":n.clearable,"joy-input--wrapper-unit":!!n.unit,"joy-input--wrapper-margin":!e.unref(R)}])},[e.createElementVNode("input",e.mergeProps(i.$attrs,{id:n.name,ref_key:"input",ref:c,class:[{"joy-input--field-disabled":e.unref(u).disabled,"joy-input--field-invalid":n.invalid}],type:S.value,value:t.modelValue,onFocus:l[0]||(l[0]=(...s)=>a.onFocus&&a.onFocus(...s)),onBlur:l[1]||(l[1]=(...s)=>a.onBlur&&a.onBlur(...s)),onInput:l[2]||(l[2]=(...s)=>a.onInput&&a.onInput(...s))}),null,16,J),e.unref(O)?(e.openBlock(),e.createElementBlock("joy-icon",{key:0,size:"xxsmall",name:"cross",class:"joy-input--clear",onClick:l[3]||(l[3]=(...s)=>a.clearValue&&a.clearValue(...s))})):e.createCommentVNode("",!0),n.unit?(e.openBlock(),e.createElementBlock("div",{key:1,"data-unit":n.unit,class:"joy-input--unit"},null,8,L)):e.createCommentVNode("",!0)],2)],2)],2))}}),D="",q=p(T,[["__scopeId","data-v-2249f4f9"]]),A=e.defineComponent({__name:"JoyWrapper",props:{justify:{type:String,default:"flex-start"},align:{type:String,default:"center"},direction:{type:String,default:"row"},wrap:{type:String,default:"wrap"}},setup(t){return(o,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["joy-wrapper",`joy-wrapper--justify-${t.justify}`,`joy-wrapper--align-${t.align}`,`joy-wrapper--direction-${t.direction}`,`joy-wrapper--wrap-${t.wrap}`])},[e.renderSlot(o.$slots,"default")],2))}}),M="";return{install:t=>{t.component("JoyButton",z),t.component("JoyInput",q),t.component("JoyLabel",f),t.component("JoySpinner",m),t.component("JoyWrapper",A)}}});

package/dist/style.css

@@ -0,0 +1 @@
+.joy-spinner[data-v-e97b61a5]{--spinner-default-color: var(--joy-color-secondary-50);--spinner-default-bg-color: var(--joy-color-secondary-10);--spinner-size: 25px;width:var(--spinner-size);height:var(--spinner-size);box-sizing:border-box;border-top:3px solid var(--spinner-default-bg-color);border-right:3px solid var(--spinner-default-bg-color);border-bottom:3px solid var(--spinner-default-bg-color);border-left:3px solid var(--spinner-default-color);position:absolute;margin:auto;font-size:10px;text-indent:-9999em;transform:translateZ(0);-webkit-animation:load8-e97b61a5 1.1s infinite linear;animation:load8-e97b61a5 1.1s infinite linear}.joy-spinner[data-v-e97b61a5],.joy-spinner[data-v-e97b61a5]:after{border-radius:50%;width:var(--spinner-size);height:var(--spinner-size)}@-webkit-keyframes load8-e97b61a5{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes load8-e97b61a5{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.joy-spinner_white[data-v-e97b61a5]{--spinner-default-color: #ffffff;--spinner-default-bg-color: rgba(255, 255, 255, .2)}.joy-button[data-v-107b2043]{--button-bg-color-main: var(--joy-color-primary-50);--button-bg-color-main-hover: var(--joy-color-primary-70);--button-bg-color-main-active: var(--joy-color-primary-90);--button-bg-color-primary: var(--joy-color-secondary-30);--button-bg-color-primary-hover: var(--joy-color-secondary-50);--button-bg-color-primary-active: var(--joy-color-secondary-90);--button-color-secondary: var(--joy-color-secondary-50);--button-color-secondary-active: var(--joy-color-secondary-90);--button-color-secondary-disabled: var(--joy-color-neutral-40);--button-border-color-secondary-disabled: var(--joy-color-neutral-30);--button-bg-color-secondary-hover: var(--joy-color-secondary-10);--button-color-ghost: var(--joy-color-secondary-50);--button-color-ghost-hover: var(--joy-color-secondary-50);--button-bg-color-ghost-hover: var(--joy-color-neutral-10);--button-color-ghost-active: var(--joy-color-secondary-50);--button-bg-color-ghost-active: var(--joy-color-secondary-10);--button-color-white: var(--joy-color-secondary-50);--button-color-white-hover: var(--joy-color-secondary-50);--button-color-white-active: var(--joy-color-secondary-90);--button-bg-color-white-hover: var(--joy-color-neutral-10);--button-bg-color-white-active: var(--joy-color-neutral-20);--button-icon-color-white-hover: var(--joy-color-secondary-90);--button-bg-color-admin: var(--joy-color-quaternary-50);--button-focus-border-color: var(--joy-color-neutral-60);--button-font-family: var(--joy-font-family);--button-bg-color-disabled: var(--joy-color-neutral-30);--button-color-disabled: var(--joy-color-neutral-40);--button-border-color-disabled: var(--joy-color-neutral-30);--button-icon-color-disabled: var(--joy-color-neutral-40);display:inline-flex;position:relative;justify-content:center;align-items:center;flex-wrap:nowrap;white-space:nowrap;box-sizing:border-box;font-family:var(--button-font-family);line-height:1;z-index:1;border:none;transition:background-color var(--joy-transition-duration-long),border var(--joy-transition-duration-long);text-decoration:none;text-align:center;cursor:pointer;outline:none;opacity:1}.joy-button joy-icon[data-v-107b2043]{margin-right:var(--joy-core-spacing-2);color:inherit}.joy-button[data-v-107b2043]:after{content:"";position:absolute;left:-4px;top:-4px;width:calc(100% + 8px);height:calc(100% + 8px);transition:box-shadow var(--joy-transition-duration-default)}.joy-button[data-v-107b2043]:focus-visible:after{box-shadow:0 0 0 2px var(--button-focus-border-color)}.joy-button *[data-v-107b2043]{pointer-events:none}.joy-button.disabled[data-v-107b2043],.joy-button[data-v-107b2043]:disabled,.joy-button[disabled][data-v-107b2043]:hover{background-color:var(--button-bg-color-disabled);color:var(--button-color-disabled);border-color:var(--button-border-color-disabled);cursor:not-allowed}.joy-button.disabled joy-icon[data-v-107b2043],.joy-button:disabled joy-icon[data-v-107b2043],.joy-button[disabled]:hover joy-icon[data-v-107b2043]{color:var(--button-icon-color-disabled)}.joy-button.joy-button_loading[data-v-107b2043]{cursor:not-allowed;color:transparent}.joy-button.joy-button_loading[data-v-107b2043]:hover{color:transparent}.joy-button.joy-button_loading joy-icon[data-v-107b2043]{color:transparent}.joy-button joy-spinner[data-v-107b2043]{position:absolute;margin:auto}.joy-button.joy-button_circle[data-v-107b2043]{padding:0;min-width:auto;border-radius:var(--joy-core-radius-5)}.joy-button.joy-button_circle joy-icon[data-v-107b2043]{margin:0}.joy-button.joy-button_circle .joy-button--slot[data-v-107b2043]{display:none}.joy-button_main[data-v-107b2043]{background-color:var(--button-bg-color-main);color:#fff}.joy-button_main[data-v-107b2043]:hover{background-color:var(--button-bg-color-main-hover)}.joy-button_main[data-v-107b2043]:active{background-color:var(--button-bg-color-main-active)}.joy-button_primary[data-v-107b2043]{background-color:var(--button-bg-color-primary);color:#fff}.joy-button_primary[data-v-107b2043]:hover{background-color:var(--button-bg-color-primary-hover)}.joy-button_primary[data-v-107b2043]:active{background-color:var(--button-bg-color-primary-active)}.joy-button_secondary[data-v-107b2043]{background-color:transparent;color:var(--button-color-secondary);border:2px solid var(--button-color-secondary)}.joy-button_secondary[data-v-107b2043]:hover,.joy-button_secondary[data-v-107b2043]:active{background-color:var(--button-bg-color-secondary-hover)}.joy-button_secondary[data-v-107b2043]:active{color:var(--button-bg-color-secondary-active);border-color:var(--button-bg-color-secondary-active)}.joy-button_secondary.disabled[data-v-107b2043],.joy-button_secondary[data-v-107b2043]:disabled,.joy-button_secondary[disabled][data-v-107b2043]:hover{cursor:not-allowed;color:var(--button-color-secondary-disabled);border-color:var(--button-border-color-secondary-disabled);background-color:#fff}.joy-button_white[data-v-107b2043]{color:var(--button-color-white);background-color:#fff}.joy-button_white[data-v-107b2043]:hover{color:var(--button-color-white-hover);background-color:var(--button-bg-color-white-hover)}.joy-button_white[data-v-107b2043]:active{color:var(--button-color-white-active);background-color:var(--button-bg-color-white-active)}.joy-button_white:not(:disabled):hover joy-icon[data-v-107b2043]{color:var(--button-icon-color-white-hover)}.joy-button_ghost[data-v-107b2043]{color:var(--button-color-ghost);background-color:transparent}.joy-button_ghost[data-v-107b2043]:hover{color:var(--button-color-ghost-hover);background-color:var(--button-bg-color-ghost-hover)}.joy-button_ghost[data-v-107b2043]:active{color:var(--button-color-ghost-active);background-color:var(--button-bg-color-ghost-active)}.joy-button_ghost:not(:disabled):hover joy-icon[data-v-107b2043]{color:var(--button-color-ghost-hover)}.joy-button_ghost[data-v-107b2043]:disabled,.joy-button_ghost[data-v-107b2043]:disabled:hover{background-color:transparent}.joy-button_admin[data-v-107b2043]{color:#fff;background-color:var(--button-bg-color-admin)}.joy-button_xxsmall[data-v-107b2043]{min-height:var(--joy-form-field-height-xxsmall);padding:var(--button-padding, var(--joy-core-spacing-2) var(--joy-core-spacing-4));font-size:var(--button-font-size, var(--joy-font-size-primary-100));border-radius:var(--button-border-radius, var(--joy-form-field-radius-xxsmall))}.joy-button_xxsmall .joy-spinner[data-v-107b2043]{--spinner-size: 12px}.joy-button_xxsmall[data-v-107b2043]:after{border-radius:calc(var(--joy-form-field-radius-xxsmall) + 2px)}.joy-button_xxsmall.joy-button_circle[data-v-107b2043]{width:var(--joy-form-field-height-xxsmall)}.joy-button_xsmall[data-v-107b2043]{min-height:var(--joy-form-field-height-xsmall);padding:var(--button-padding, var(--joy-core-spacing-2) var(--joy-core-spacing-8));font-size:var(--button-font-size, var(--joy-font-size-primary-200));border-radius:var(--button-border-radius, var(--joy-form-field-radius-xsmall))}.joy-button_xsmall .joy-spinner[data-v-107b2043]{--spinner-size: 16px}.joy-button_xsmall[data-v-107b2043]:after{border-radius:calc(var(--joy-form-field-radius-xsmall) + 2px)}.joy-button_xsmall.joy-button_circle[data-v-107b2043]{width:var(--joy-form-field-height-xsmall)}.joy-button_small[data-v-107b2043]{min-height:var(--joy-form-field-height-small);padding:var(--button-padding, var(--joy-core-spacing-3) var(--joy-core-spacing-9));font-size:var(--button-font-size, var(--joy-font-size-primary-300));border-radius:var(--button-border-radius, var(--joy-form-field-radius-small))}.joy-button_small .joy-spinner[data-v-107b2043]{--spinner-size: 20px}.joy-button_small[data-v-107b2043]:after{border-radius:calc(var(--joy-form-field-radius-small) + 2px)}.joy-button_small.joy-button_circle[data-v-107b2043]{width:var(--joy-form-field-height-small)}.joy-button_medium[data-v-107b2043]{min-height:var(--joy-form-field-height-medium);padding:var(--button-padding, var(--joy-core-spacing-3) var(--joy-core-spacing-9));font-size:var(--button-font-size, var(--joy-font-size-primary-400));border-radius:var(--button-border-radius, var(--joy-form-field-radius-medium))}.joy-button_medium[data-v-107b2043]:after{border-radius:calc(var(--joy-form-field-radius-medium) + 2px)}.joy-button_medium.joy-button_circle[data-v-107b2043]{width:var(--joy-form-field-height-medium)}.joy-button_large[data-v-107b2043]{min-height:var(--joy-form-field-height-large);padding:var(--button-padding, var(--joy-core-spacing-4) var(--joy-core-spacing-9));font-size:var(--button-font-size, var(--joy-font-size-primary-600));border-radius:var(--button-border-radius, var(--joy-form-field-radius-large));min-width:calc(var(--joy-core-spacing-base) * 40)}.joy-button_large[data-v-107b2043]:after{border-radius:calc(var(--joy-form-field-radius-large) + 2px)}.joy-button_large.joy-button_circle[data-v-107b2043]{width:var(--joy-form-field-height-large)}.joy-label[data-v-21392cc3]{--label-font-size: var(--joy-font-size-primary-400);display:block;width:100%;box-sizing:border-box;font-weight:var(--joy-font-weight-normal);line-height:var(--joy-line-height-large);font-size:var(--label-font-size);font-family:var(--joy-font-family);color:var(--joy-color-text-title);text-align:left;margin-bottom:var(--joy-core-spacing-2)}.joy-label--small[data-v-21392cc3]{--label-font-size: var(--joy-font-size-primary-300)}.joy-label--medium[data-v-21392cc3]{--label-font-size: var(--joy-font-size-primary-400)}.joy-label--large[data-v-21392cc3]{--label-font-size: var(--joy-font-size-primary-600)}.joy-label-required[data-v-21392cc3]{margin-left:var(--joy-core-spacing-1);font-size:var(--label-font-size);line-height:1}.joy-label-optional[data-v-21392cc3]{font-size:var(--joy-font-size-primary-300);font-style:italic;color:var(--joy-color-neutral-40)}.joy-input--small[data-v-2249f4f9]{--input-height: var(--joy-form-field-height-small);--input-radius: var(--joy-form-field-radius-small);--input-padding: var(--joy-core-spacing-2) var(--joy-core-spacing-5);--input-font-size: var(--joy-font-size-primary-200);--input-unit-height: 32px}.joy-input--medium[data-v-2249f4f9]{--input-height: var(--joy-form-field-height-medium);--input-radius: var(--joy-form-field-radius-medium);--input-padding: var(--joy-core-spacing-3) var(--joy-core-spacing-5);--input-font-size: var(--joy-font-size-primary-300);--input-unit-height: 40px}.joy-input--large[data-v-2249f4f9]{--input-height: var(--joy-form-field-height-large);--input-radius: var(--joy-form-field-radius-large);--input-padding: var(--joy-core-spacing-3) var(--joy-core-spacing-5);--input-font-size: var(--joy-font-size-primary-400);--input-unit-height: 56px}.joy-input[data-v-2249f4f9]{display:block;--input-color: var(--joy-color-neutral-60);--input-focus-color: var(--joy-color-secondary-30);--input-hover-color: var(--joy-color-neutral-60);--input-hover-border-color: var(--joy-color-state-hover);--input-focus-border-color: var(--joy-color-state-focus);--input-border-color: var(--joy-color-neutral-30);--input-bg-color: white;--input-color-disabled: var(--joy-color-neutral-40);--input-border-color-disabled: var(--joy-color-neutral-30);--input-bg-color-disabled: var(--joy-color-neutral-10);--input-color-invalid: var(--joy-color-error-50);--input-color-invalid-hover: var(--joy-color-error-90);--input-icon-color: var(--joy-color-neutral-50);--input-transition-duration: var(--joy-transition-duration-default);position:relative;font-family:var(--joy-font-family)}.joy-input input[data-v-2249f4f9]{position:relative;z-index:1;appearance:none;width:100%;box-sizing:border-box;background-color:var(--input-bg-color);border-width:var(--joy-form-border-width);border-style:solid;border-color:var(--input-border-color);transition:all var(--input-transition-duration) var(--joy-transition-timing-function);border-radius:var(--input-radius);height:var(--input-height);color:var(--input-color);font-size:var(--input-font-size);padding:var(--input-padding);outline:none}.joy-input input[data-v-2249f4f9]::-webkit-input-placeholder{color:var(--joy-color-neutral-40)}.joy-input input[data-v-2249f4f9]::-webkit-outer-spin-button,.joy-input input[data-v-2249f4f9]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.joy-input input[data-v-2249f4f9]::-webkit-search-cancel-button{appearance:none}.joy-input input[type=number][data-v-2249f4f9]{-moz-appearance:textfield}.joy-input input[type=password][data-v-2249f4f9]{font-family:Verdana;letter-spacing:.125em}.joy-input input[data-v-2249f4f9]:hover{border-color:var(--joy-color-state-hover)}.joy-input input:hover~joy-icon[data-v-2249f4f9]{color:var(--input-hover-color)}.joy-input input:hover~.joy-input--unit[data-v-2249f4f9]{border-color:var(--input-hover-color)}.joy-input input[data-v-2249f4f9]{transition:border-color var(--joy-transition-duration-default) var(--joy-transition-timing-function)}.joy-input input[data-v-2249f4f9]:focus{border-color:var(--joy-color-state-focus)}.joy-input input:focus~joy-icon[data-v-2249f4f9]{color:var(--input-focus-color)}.joy-input input:focus~.joy-input--unit[data-v-2249f4f9]{border-color:var(--input-focus-border-color)}.joy-input joy-icon[data-v-2249f4f9]{color:var(--input-color)}.joy-input .joy-input--password-icon[data-v-2249f4f9]{z-index:2;position:absolute;top:50%;transform:translateY(-50%);cursor:pointer;right:var(--joy-core-spacing-4)}.joy-input .joy-input--wrapper[data-v-2249f4f9]{display:flex;align-items:center;position:relative}.joy-input .joy-input--wrapper-margin[data-v-2249f4f9]{margin-bottom:var(--joy-core-spacing-4)}.joy-input .joy-input--wrapper-has-icon joy-icon[data-v-2249f4f9]{z-index:2;position:absolute;top:50%;transform:translateY(-50%);user-select:none;left:var(--joy-core-spacing-4)}.joy-input .joy-input--wrapper-has-icon input[data-v-2249f4f9]{padding-left:var(--joy-core-spacing-10)}.joy-input .joy-input--wrapper-unit input[data-v-2249f4f9]{border-right:0;border-bottom-right-radius:0;border-top-right-radius:0}.joy-input .joy-input--unit[data-v-2249f4f9]{display:flex;align-items:center;padding-right:4px;cursor:default;position:relative;background-color:var(--input-bg-color);height:var(--input-height);border-radius:0 var(--input-height) var(--input-height) 0;text-align:center;font-style:normal;flex-shrink:0;box-sizing:border-box;border-width:var(--joy-form-border-width);border-style:solid;border-color:var(--input-border-color);transition:all var(--input-transition-duration) var(--joy-transition-timing-function);border-left:0}.joy-input .joy-input--unit[data-v-2249f4f9]:before{content:attr(data-unit);display:flex;box-sizing:border-box;align-items:center;justify-content:center;position:relative;background-color:var(--joy-color-secondary-10);border-radius:var(--input-unit-height);font-size:var(--input-font-size);height:var(--input-unit-height);min-width:var(--input-unit-height);padding:0 var(--joy-core-spacing-3);color:var(--joy-color-secondary-50)}.joy-input input[data-v-2249f4f9]:disabled,.joy-input input[data-v-2249f4f9]:disabled:hover{cursor:not-allowed;background-color:var(--input-bg-color-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled)}.joy-input input:disabled~joy-icon[data-v-2249f4f9],.joy-input input:disabled:hover~joy-icon[data-v-2249f4f9]{color:var(--input-color-disabled)}.joy-input input:disabled~.joy-input--unit[data-v-2249f4f9],.joy-input input:disabled:hover~.joy-input--unit[data-v-2249f4f9]{background-color:var(--input-bg-color-disabled);border-color:var(--input-border-color-disabled)}.joy-input input.joy-input--field-invalid[data-v-2249f4f9]{border-color:var(--input-color-invalid);color:var(--input-color-invalid)}.joy-input input.joy-input--field-invalid~joy-icon[data-v-2249f4f9]{color:var(--input-color-invalid)}.joy-input input.joy-input--field-invalid~.joy-input--unit[data-v-2249f4f9]{border-color:var(--input-color-invalid)}.joy-input input.joy-input--field-invalid[data-v-2249f4f9]:hover,.joy-input input.joy-input--field-invalid[data-v-2249f4f9]:focus{border-color:var(--input-color-invalid-hover)}.joy-input input.joy-input--field-invalid:hover~joy-icon[data-v-2249f4f9],.joy-input input.joy-input--field-invalid:focus~joy-icon[data-v-2249f4f9]{color:var(--input-color-invalid-hover)}.joy-input input.joy-input--field-invalid:hover~.joy-input--unit[data-v-2249f4f9],.joy-input input.joy-input--field-invalid:focus~.joy-input--unit[data-v-2249f4f9]{border-color:var(--input-color-invalid-hover)}.joy-input--wrapper---clearable input[data-v-2249f4f9]{padding-right:var(--joy-core-spacing-10)}.joy-input--clear[data-v-2249f4f9]{cursor:pointer;position:absolute;top:50%;z-index:2;right:var(--joy-core-spacing-5);transform:translateY(-50%)}.joy-wrapper{--wrapper-gap: var(--joy-core-spacing-8) var(--joy-core-spacing-4);display:flex;gap:var(--wrapper-gap);flex-wrap:wrap;margin-bottom:var(--joy-core-spacing-8)}.joy-wrapper--justify-flex-start{justify-content:flex-start}.joy-wrapper--justify-flex-end{justify-content:flex-end}.joy-wrapper--justify-center{justify-content:center}.joy-wrapper--justify-space-between{justify-content:space-between}.joy-wrapper--align-flex-start{align-items:flex-start}.joy-wrapper--align-flex-end{align-items:flex-end}.joy-wrapper--align-center{align-items:center}.joy-wrapper--align-stretch{align-items:stretch}.joy-wrapper--direction-row{flex-direction:row}.joy-wrapper--direction-column{flex-direction:column}.joy-wrapper--wrap-wrap{flex-wrap:wrap}.joy-wrapper--wrap-nowrap{flex-wrap:nowrap}

package/dist/types/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Here we can store the types that are commonly used by many components.
+ * We use the same naming convention for size, levels or colors, so let's gather everything here.
+ * Each component will start from these types and enrich them locally to pick what's nedeed.
+ */
+export declare const GENERIC_VARIANTS: readonly ["primary", "secondary"];
+export declare const SIZES: readonly ["xlarge", "large", "medium", "small", "xsmall", "xxsmall"];

package/dist/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./dist/components/main";
+export * from "./dist/types/index";
+export * from "./joy-components";

package/joy-components.d.ts

@@ -0,0 +1,11 @@
+// @ts-nocheck
+declare module "vue" {
+  export interface GlobalComponents {
+    JoyButton: typeof import("./dist/components/JoyButton/JoyButton.vue")["default"];
+    JoySpinner: typeof import("./dist/components/JoySpinner/JoySpinner.vue")["default"];
+    JoyInput: typeof import("./dist/components/JoyInput/JoyInput.vue")["default"];
+    JoyLabel: typeof import("./dist/components/JoyLabel/JoyLabel.vue")["default"];
+  }
+}
+
+export {};

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@maltjoy/core-vue",
+  "version": "1.0.0-alpha.1.1",
+  "type": "module",
+  "files": [
+    "dist",
+    "index.d.ts",
+    "joy-components.d.ts"
+  ],
+  "main": "./dist/joy-vue.umd.cjs",
+  "module": "./dist/joy-vue.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/joy-vue.js",
+      "require": "./dist/joy-vue.umd.cjs"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview",
+    "test": "vitest --dom --coverage",
+    "lint": "eslint --ext .ts,.vue src",
+    "lint:fix": "eslint --ext .ts,.vue src --fix",
+    "format": "prettier --write \"**/*.{js,ts,vue}\"",
+    "format:staged": "prettier --write"
+  },
+  "dependencies": {
+    "@maltjoy/themes": "^2.1.2",
+    "vue": "3.2.45"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.2.0",
+    "@typescript-eslint/parser": "5.51.0",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitest/coverage-istanbul": "^0.28.4",
+    "@vue/runtime-core": "3.2.45",
+    "@vue/runtime-dom": "3.2.45",
+    "@vue/test-utils": "^2.2.10",
+    "eslint": "7.22.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-vue": "^9.9.0",
+    "happy-dom": "^8.2.6",
+    "prettier": "^2.8.3",
+    "typescript": "^4.9.3",
+    "vite": "^4.0.0",
+    "vite-plugin-dts": "^1.7.2",
+    "vitest": "^0.28.4",
+    "vue-tsc": "^1.0.11"
+  }
+}