@itguy614/clean-ui 1.2.1 → 1.3.0

package/dist/components/CuiInputStepper.vue2.js

@@ -1,4 +1,239 @@
-import f from "./CuiInputStepper.vue.js";
+import { defineComponent as q, computed as r, useTemplateRef as S, withDirectives as H, openBlock as s, createElementBlock as c, normalizeStyle as L, normalizeClass as P, toDisplayString as U, createCommentVNode as A, createVNode as u, withCtx as m, createElementVNode as C, vShow as R } from "vue";
+import { INPUT_SIZE_SCALE as T, nestedSize as F } from "../utils/sizing.js";
+import b from "./CuiButton.vue.js";
+import v from "./CuiIcon.vue.js";
+const K = {
+  key: 0,
+  class: "cui-input-stepper__label"
+}, Z = {
+  key: 1,
+  class: "cui-input-stepper__control"
+}, $ = ["id", "name", "autocomplete", "aria-describedby", "aria-required", "aria-labelledby", "aria-valuenow", "aria-valuemin", "aria-valuemax", "value", "disabled"], j = {
+  key: 2,
+  class: "cui-input-stepper__control"
+}, G = ["id", "name", "autocomplete", "aria-describedby", "aria-labelledby", "aria-valuenow", "aria-valuemin", "aria-valuemax", "value", "disabled"], X = /* @__PURE__ */ q({
+  __name: "CuiInputStepper",
+  props: {
+    modelValue: { default: 0 },
+    min: {},
+    max: {},
+    step: { default: 1 },
+    orientation: { default: "horizontal" },
+    label: {},
+    pad: {},
+    wrap: { type: Boolean, default: !1 },
+    name: {},
+    autocomplete: {},
+    id: {},
+    ariaDescribedby: {},
+    ariaLabelledby: {},
+    ariaRequired: { type: Boolean },
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(i, { expose: M, emit: E }) {
+    const e = i, o = E, f = r(() => e.wrap || e.min === void 0 || e.modelValue - e.step >= e.min), p = r(() => e.wrap || e.max === void 0 || e.modelValue + e.step <= e.max);
+    function B(a) {
+      let t = Math.round(a * 1e10) / 1e10;
+      return e.max !== void 0 && (t = Math.min(t, e.max)), e.min !== void 0 && (t = Math.max(t, e.min)), t;
+    }
+    function w(a) {
+      if (!e.disabled)
+        switch (a.key) {
+          case "ArrowUp":
+            a.preventDefault(), z();
+            break;
+          case "ArrowDown":
+            a.preventDefault(), x();
+            break;
+          case "PageUp":
+          case "PageDown": {
+            a.preventDefault();
+            const t = e.step * 10 * (a.key === "PageUp" ? 1 : -1), n = B(e.modelValue + t);
+            n !== e.modelValue && o("update:modelValue", n);
+            break;
+          }
+          case "Home":
+            if (e.min === void 0) return;
+            a.preventDefault(), o("update:modelValue", e.min);
+            break;
+          case "End":
+            if (e.max === void 0) return;
+            a.preventDefault(), o("update:modelValue", e.max);
+            break;
+        }
+    }
+    function x() {
+      if (e.disabled || !f.value) return;
+      let a = Math.round((e.modelValue - e.step) * 1e10) / 1e10;
+      if (e.wrap && e.min !== void 0 && e.max !== void 0 && a < e.min) {
+        const t = e.max - e.min + 1;
+        a = e.min + Math.floor((t - 1) / e.step) * e.step;
+      } else e.min !== void 0 && (a = Math.max(a, e.min));
+      o("update:modelValue", a);
+    }
+    function z() {
+      if (e.disabled || !p.value) return;
+      let a = Math.round((e.modelValue + e.step) * 1e10) / 1e10;
+      e.wrap && e.min !== void 0 && e.max !== void 0 && a > e.max ? a = e.min : e.max !== void 0 && (a = Math.min(a, e.max)), o("update:modelValue", a);
+    }
+    const k = r(() => e.pad && e.pad > 0 ? String(e.modelValue).padStart(e.pad, "0") : String(e.modelValue)), g = r(() => e.orientation === "vertical");
+    function D(a) {
+      const t = a.target.value, n = parseFloat(t);
+      if (isNaN(n)) return;
+      let d = n;
+      e.min !== void 0 && (d = Math.max(d, e.min)), e.max !== void 0 && (d = Math.min(d, e.max)), o("update:modelValue", d);
+    }
+    const l = r(() => {
+      const a = T[e.size];
+      return {
+        buttonSize: F(e.size),
+        iconSize: a.fontSize,
+        style: {
+          "--_input-stepper-height": a.height,
+          "--_input-stepper-font-size": a.fontSize,
+          // The field holds a handful of digits, so it scales with the digits rather than
+          // with the control's padding.
+          "--_input-stepper-field-width": `calc(${a.fontSize} * 3)`
+        }
+      };
+    }), y = S("rootEl"), h = S("inputH"), V = S("inputV");
+    function I(a) {
+      var n;
+      const t = h.value ?? V.value;
+      t ? t.focus(a) : (n = y.value) == null || n.focus(a);
+    }
+    function N() {
+      var a;
+      (a = h.value ?? V.value) == null || a.blur();
+    }
+    return M({ el: y, focus: I, blur: N }), (a, t) => H((s(), c("div", {
+      class: P(["cui-input-stepper", { "cui-input-stepper--vertical": g.value, "cui-input-stepper--disabled": i.disabled }]),
+      ref_key: "rootEl",
+      ref: y,
+      style: L(l.value.style)
+    }, [
+      i.label ? (s(), c("label", K, U(i.label), 1)) : A("", !0),
+      g.value ? (s(), c("div", j, [
+        u(b, {
+          variant: "ghost",
+          size: l.value.buttonSize,
+          tabindex: "-1",
+          disabled: i.disabled || !p.value,
+          color: i.color,
+          class: "cui-input-stepper__button",
+          onClick: z
+        }, {
+          default: m(() => [
+            u(v, {
+              name: "caret-up",
+              size: l.value.iconSize
+            }, null, 8, ["size"])
+          ]),
+          _: 1
+        }, 8, ["size", "disabled", "color"]),
+        C("input", {
+          ref_key: "inputV",
+          ref: V,
+          class: "cui-input-stepper__field",
+          id: i.id,
+          name: i.name,
+          autocomplete: i.autocomplete,
+          "aria-describedby": i.ariaDescribedby,
+          "aria-labelledby": i.ariaLabelledby,
+          role: "spinbutton",
+          "aria-valuenow": i.modelValue,
+          "aria-valuemin": i.min,
+          "aria-valuemax": i.max,
+          type: "text",
+          inputmode: "numeric",
+          value: k.value,
+          disabled: i.disabled,
+          onKeydown: w,
+          onInput: D
+        }, null, 40, G),
+        u(b, {
+          variant: "ghost",
+          size: l.value.buttonSize,
+          tabindex: "-1",
+          disabled: i.disabled || !f.value,
+          color: i.color,
+          class: "cui-input-stepper__button",
+          onClick: x
+        }, {
+          default: m(() => [
+            u(v, {
+              name: "caret-down",
+              size: l.value.iconSize
+            }, null, 8, ["size"])
+          ]),
+          _: 1
+        }, 8, ["size", "disabled", "color"])
+      ])) : (s(), c("div", Z, [
+        u(b, {
+          variant: "ghost",
+          size: l.value.buttonSize,
+          tabindex: "-1",
+          disabled: i.disabled || !f.value,
+          color: i.color,
+          class: "cui-input-stepper__button",
+          onClick: x
+        }, {
+          default: m(() => [
+            u(v, {
+              name: "minus",
+              size: l.value.iconSize
+            }, null, 8, ["size"])
+          ]),
+          _: 1
+        }, 8, ["size", "disabled", "color"]),
+        C("input", {
+          ref_key: "inputH",
+          ref: h,
+          class: "cui-input-stepper__field",
+          id: i.id,
+          name: i.name,
+          autocomplete: i.autocomplete,
+          "aria-describedby": i.ariaDescribedby,
+          "aria-required": i.ariaRequired || void 0,
+          "aria-labelledby": i.ariaLabelledby,
+          role: "spinbutton",
+          "aria-valuenow": i.modelValue,
+          "aria-valuemin": i.min,
+          "aria-valuemax": i.max,
+          type: "text",
+          inputmode: "numeric",
+          value: k.value,
+          disabled: i.disabled,
+          onKeydown: w,
+          onInput: D
+        }, null, 40, $),
+        u(b, {
+          variant: "ghost",
+          size: l.value.buttonSize,
+          tabindex: "-1",
+          disabled: i.disabled || !p.value,
+          color: i.color,
+          class: "cui-input-stepper__button",
+          onClick: z
+        }, {
+          default: m(() => [
+            u(v, {
+              name: "plus",
+              size: l.value.iconSize
+            }, null, 8, ["size"])
+          ]),
+          _: 1
+        }, 8, ["size", "disabled", "color"])
+      ]))
+    ], 6)), [
+      [R, !i.hidden]
+    ]);
+  }
+});
 export {
-  f as default
+  X as default
 };

package/dist/components/CuiKbd.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CuiKbd.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiKbd.vue"],"names":[],"mappings":"AAqDA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGpE,MAAM,WAAW,WAAY,SAAQ,aAAa,EAAE,aAAa;CAChE;AAuDD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAsB/C,QAAA,MAAM,eAAe;;;6EAOnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CuiKbd.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiKbd.vue"],"names":[],"mappings":"AAsDA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGpE,MAAM,WAAW,WAAY,SAAQ,aAAa,EAAE,aAAa;CAChE;AAyDD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAsB/C,QAAA,MAAM,eAAe;;;6EAOnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/CuiKbd.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as a, computed as m, withDirectives as s, openBlock as l, createElementBlock as c, normalizeStyle as p, renderSlot as u, vShow as f } from "vue";
+import { defineComponent as a, computed as m, withDirectives as s, openBlock as l, createElementBlock as c, normalizeStyle as u, renderSlot as p, vShow as f } from "vue";
 import { clampSize as h, scaleDensity as e } from "../utils/sizing.js";
-const b = /* @__PURE__ */ a({
+const v = /* @__PURE__ */ a({
   __name: "CuiKbd",
   props: {
     hidden: { type: Boolean, default: !1 },
@@ -13,7 +13,8 @@ const b = /* @__PURE__ */ a({
       lg: { fontSize: "0.8125rem", padding: `${e("0.1875rem")} ${e("0.4375rem")}`, minWidth: "1.5rem" }
     }, t = m(() => h(n.size, o));
     return (d, S) => s((l(), c("kbd", {
-      style: p({
+      class: "cui-kbd",
+      style: u({
         display: "inline-flex",
         alignItems: "center",
         justifyContent: "center",
@@ -33,12 +34,12 @@ const b = /* @__PURE__ */ a({
         verticalAlign: "middle"
       })
     }, [
-      u(d.$slots, "default")
+      p(d.$slots, "default")
     ], 4)), [
       [f, !r.hidden]
     ]);
   }
 });
 export {
-  b as default
+  v as default
 };

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

@@ -1,9 +1,9 @@
 import { nextTick } from "vue";
-import type { CuiColor, CuiSize, HideableProps, ColorableProps, SizeableProps, DisableableProps } from "../types/common";
+import type { CuiColor, CuiSize, HideableProps, ColorableProps, SizeableProps, DisableableProps, NativeControlProps } from "../types/common";
 export interface MaskToken {
     pattern: RegExp;
 }
-export interface CuiMaskedInputProps extends HideableProps, ColorableProps, SizeableProps, DisableableProps {
+export interface CuiMaskedInputProps extends NativeControlProps, HideableProps, ColorableProps, SizeableProps, DisableableProps {
     /** Raw value (no separators) */
     modelValue?: string;
     /** Mask pattern: # = digit, A = letter, * = alphanumeric, others are literal */
@@ -46,6 +46,12 @@ declare const __VLS_component: import("vue").DefineComponent<CuiMaskedInputProps
             readonly errorMessage?: string | undefined;
             readonly readonly?: boolean | undefined;
             readonly rounded?: import("../index.js").CuiRounded | undefined;
+            readonly name?: string | undefined;
+            readonly autocomplete?: string | undefined;
+            readonly id?: string | undefined;
+            readonly ariaDescribedby?: string | undefined;
+            readonly ariaLabelledby?: string | undefined;
+            readonly ariaRequired?: boolean | undefined;
             readonly hidden?: boolean | undefined;
             readonly color?: CuiColor | undefined;
             readonly size?: CuiSize | undefined;
@@ -136,7 +142,7 @@ declare const __VLS_component: import("vue").DefineComponent<CuiMaskedInputProps
         };
     }) | null>>;
     formattedValue: import("vue").ComputedRef<string>;
-    focus: () => any;
+    focus: (opts?: FocusOptions) => any;
     blur: () => any;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;

package/dist/components/CuiMaskedInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CuiMaskedInput.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiMaskedInput.vue"],"names":[],"mappings":"AAAA,OAqaO,EAAwB,QAAQ,EAAkB,MAAM,KAAK,CAAC;AAErE,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEzH,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAoB,SAAQ,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IACzG,gCAAgC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gFAAgF;IAChF,IAAI,EAAE,MAAM,CAAC;IACb,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA4cD,QAAA,IAAyB,QAAQ,IAAW,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AAC9G,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GACrD;IAAE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AA4BxD,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAHF,GAAE,8CACQ,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAhfxF,OAAO;cAIJ,OAAO;;;;;gBAhBL,MAAM;eAUP,OAAO;cAJR,MAAM;6EAigBjB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CuiMaskedInput.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiMaskedInput.vue"],"names":[],"mappings":"AAAA,OA8aO,EAAwB,QAAQ,EAAkB,MAAM,KAAK,CAAC;AAErE,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE7I,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IAC7H,gCAAgC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gFAAgF;IAChF,IAAI,EAAE,MAAM,CAAC;IACb,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6dD,QAAA,IAAyB,QAAQ,IAAW,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AAC9G,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GACrD;IAAE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AA4BxD,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCApCL,GAAG,8CAA8C,GAAG,yBACxD,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAtHpC,YAAY;;;;;;;;;WA1WnB,OAAO;cAIJ,OAAO;;;;;gBAhBL,MAAM;eAUP,OAAO;cAJR,MAAM;6EAkhBjB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}