sprintify-ui 0.12.19 → 0.12.21

package/dist/types/components/BaseAvatarGroup.vue.d.ts

@@ -46,7 +46,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>> & Readonly<{}>, {
     to: (user: AvatarUserInput) => RouteLocationRaw;
     size: string;
-    max: number;
     tooltip: boolean;
+    max: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/types/components/BaseButton.vue.d.ts

@@ -67,11 +67,11 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     icon: string;
     disabled: boolean;
     as: string;
+    tooltip: string | null;
     loading: boolean;
     iconPosition: "start" | "end";
     sizeBehavior: SizeBehavior;
     align: "center" | "between";
-    tooltip: string | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/types/components/BaseInput.vue.d.ts

@@ -9,6 +9,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: string;
         type: PropType<string | number | null>;
     };
+    /**
+     * v-model modifiers. `v-model.unmasked` makes the component emit maska's
+     * unmasked value (raw digits, dot decimal, no separators) instead of the
+     * masked display value. No-op when no `mask` is set.
+     */
+    modelModifiers: {
+        default: () => {};
+        type: PropType<{
+            unmasked?: boolean;
+        }>;
+    };
     class: {
         default: string;
         type: PropType<string | string[]>;
@@ -112,6 +123,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: string;
         type: PropType<string | number | null>;
     };
+    /**
+     * v-model modifiers. `v-model.unmasked` makes the component emit maska's
+     * unmasked value (raw digits, dot decimal, no separators) instead of the
+     * masked display value. No-op when no `mask` is set.
+     */
+    modelModifiers: {
+        default: () => {};
+        type: PropType<{
+            unmasked?: boolean;
+        }>;
+    };
     class: {
         default: string;
         type: PropType<string | string[]>;
@@ -218,6 +240,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     disabled: boolean;
     name: string | null | undefined;
     modelValue: string | number | null;
+    modelModifiers: {
+        unmasked?: boolean;
+    };
     autocomplete: boolean;
     preventSubmit: boolean;
     iconLeft: string | null | undefined;

package/dist/types/components/BaseTableColumn.vue.d.ts

@@ -204,8 +204,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     meta: Record<string, any> | unknown[];
     width: number;
     padding: string;
-    align: "left" | "center" | "right";
     tooltip: string;
+    align: "left" | "center" | "right";
     field: string;
     headerClass: string | Record<string, any> | unknown[];
     searchable: boolean;

package/dist/types/components/BaseTableHeader.vue.d.ts

@@ -20,8 +20,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
 }>, {
     class: string | false | 0 | 0n | ClassNameValue[] | null;
     style: string | false | import("vue").CSSProperties | StyleValue[] | null;
-    align: "left" | "center" | "right";
     tooltip: string;
+    align: "left" | "center" | "right";
     colspan: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.12.19",
+  "version": "0.12.21",
   "type": "module",
   "scripts": {
     "generate-llm-txt": "node scripts/generate-llm-txt.js",

package/src/components/BaseInput.stories.js

@@ -32,6 +32,10 @@ export default {
         "time",
         "credit-card",
         "zip-code-canada",
+        "integer",
+        "integer-fr",
+        "money",
+        "money-fr",
         "dynamicMask",
         "customMask",
       ],
@@ -139,6 +143,54 @@ CanadianZipCodeMask.args = {
   mask: "zip-code-canada", // M5M 4M4
 };
 
+export const IntegerMask = Template.bind({});
+IntegerMask.args = {
+  mask: "integer", // 1,000,000
+  placeholder: "1,000,000",
+};
+
+export const IntegerMaskFr = Template.bind({});
+IntegerMaskFr.args = {
+  mask: "integer-fr", // 1 000 000
+  placeholder: "1 000 000",
+};
+
+export const MoneyMask = Template.bind({});
+MoneyMask.args = {
+  mask: "money", // 1,000,000.00
+  placeholder: "1,000,000.00",
+};
+
+export const MoneyMaskFr = Template.bind({});
+MoneyMaskFr.args = {
+  mask: "money-fr", // 1 000 000,00
+  placeholder: "1 000 000,00",
+};
+
+const UnmaskedT = (args) => ({
+  components: { BaseInput, ShowValue },
+  setup() {
+    const masked = ref(null);
+    const unmasked = ref(null);
+    return { args, masked, unmasked };
+  },
+  template: `
+    <p class="text-xs text-slate-600 leading-tight mb-1">Default (masked value)</p>
+    <BaseInput v-model="masked" v-bind="args" class="w-full mb-1"></BaseInput>
+    <ShowValue :value="masked" />
+
+    <p class="text-xs text-slate-600 leading-tight mb-1 mt-4">v-model.unmasked (raw value)</p>
+    <BaseInput v-model.unmasked="unmasked" v-bind="args" class="w-full mb-1"></BaseInput>
+    <ShowValue :value="unmasked" />
+  `,
+});
+
+export const UnmaskedModifier = UnmaskedT.bind({});
+UnmaskedModifier.args = {
+  mask: "money-fr",
+  placeholder: "1 000 000,00",
+};
+
 export const DynamicMask = Template.bind({});
 DynamicMask.args = {
   mask: ["###.###.###-##", "##.###.###/####-##"],

package/src/components/BaseInput.vue

@@ -79,7 +79,7 @@ import { useField } from '@/composables/field';
 import { vMaska } from 'maska/vue';
 import { Size, sizes } from '@/utils/sizes';
 import { twMerge } from 'tailwind-merge';
-import { MaskInputOptions, MaskType } from 'maska';
+import { MaskaDetail, MaskInputOptions, MaskType } from 'maska';
 
 defineOptions({
   inheritAttrs: false,
@@ -90,6 +90,15 @@ const props = defineProps({
     default: '',
     type: [String, Number, null] as PropType<string | number | null>,
   },
+  /**
+   * v-model modifiers. `v-model.unmasked` makes the component emit maska's
+   * unmasked value (raw digits, dot decimal, no separators) instead of the
+   * masked display value. No-op when no `mask` is set.
+   */
+  modelModifiers: {
+    default: () => ({}),
+    type: Object as PropType<{ unmasked?: boolean }>,
+  },
   class: {
     default: '',
     type: [String, Array] as PropType<string | string[]>,
@@ -203,13 +212,38 @@ const hasRightListener = computed(() => {
   return props.onIconRightClick !== undefined;
 });
 
-const maskOptions = computed(() => {
-  if (props.mask) {
-    return {
-      mask: maskInternal.value,
-    };
+/**
+ * Number-format aliases. These use maska's `number` mode (locale-derived
+ * grouping/decimal separators) instead of a `#` mask pattern. The `-fr`
+ * variants use `fr-CA` (no-break space grouping + comma decimal); the
+ * `money` variants allow up to 2 fraction digits, the `integer` variants none.
+ */
+const NUMBER_MASKS: Record<string, { locale: string; fraction: number }> = {
+  integer: { locale: 'en', fraction: 0 },
+  'integer-fr': { locale: 'fr-CA', fraction: 0 },
+  money: { locale: 'en', fraction: 2 },
+  'money-fr': { locale: 'fr-CA', fraction: 2 },
+};
+
+/** Latest maska result, captured so `.unmasked` can emit the raw value. */
+const maskaDetail = ref<MaskaDetail | null>(null);
+
+const maskOptions = computed<MaskInputOptions | undefined>(() => {
+  if (!props.mask) {
+    return undefined;
   }
-  return undefined;
+
+  const base =
+    typeof props.mask === 'string' && props.mask in NUMBER_MASKS
+      ? { number: NUMBER_MASKS[props.mask] }
+      : { mask: maskInternal.value };
+
+  return {
+    ...base,
+    onMaska: (detail: MaskaDetail) => {
+      maskaDetail.value = detail;
+    },
+  };
 });
 
 const bindings = computed<any>(() => {
@@ -274,7 +308,11 @@ const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate, sizeIntern
 
 function onInput(event: any | null) {
   if (event === null) {
-    emitUpdate(null);
+    return emitUpdate(null);
+  }
+
+  if (props.modelModifiers.unmasked && maskaDetail.value) {
+    return emitUpdate(maskaDetail.value.unmasked);
   }
 
   return emitUpdate(get(event, 'target.value', ''));

package/src/components/BaseTooltip.vue

@@ -5,7 +5,7 @@
   >
     <slot />
     <Teleport
-      v-if="visible && text"
+      v-if="visible && (text || $slots.tooltip)"
       to="body"
     >
       <div