@bagelink/vue 0.0.1070 → 0.0.1072
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/NumberInput.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"NumberInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/NumberInput.vue"],"names":[],"mappings":"AAgLA,OAAO,EAAQ,KAAK,aAAa,EAAO,MAAM,eAAe,CAAA;AAK7D,KAAK,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,CAAA;AAEzD,UAAU,gBAAgB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;CAChB;;;;;;AAgSD,wBAQG"}
|
package/dist/index.cjs
CHANGED
|
@@ -19995,15 +19995,16 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
|
|
|
19995
19995
|
const emit2 = __emit;
|
|
19996
19996
|
let numberValue = vue.ref(__props.modelValue || 0);
|
|
19997
19997
|
const btnLayouts = ["horizontal", "vertical"];
|
|
19998
|
+
const canAdd = vue.computed(() => !(__props.max !== void 0 && numberValue.value + __props.step > __props.max));
|
|
19999
|
+
const canDecrement = vue.computed(() => !(__props.min !== void 0 && numberValue.value - __props.step < __props.min));
|
|
19998
20000
|
function increment() {
|
|
19999
|
-
if (
|
|
20000
|
-
numberValue.value
|
|
20001
|
+
if (!canAdd.value) return;
|
|
20002
|
+
numberValue.value += __props.step;
|
|
20001
20003
|
emit2("update:modelValue", numberValue.value);
|
|
20002
20004
|
}
|
|
20003
20005
|
function decrement() {
|
|
20004
|
-
|
|
20005
|
-
|
|
20006
|
-
numberValue.value = numberValue.value - __props.step;
|
|
20006
|
+
if (!canDecrement.value) return;
|
|
20007
|
+
numberValue.value -= __props.step;
|
|
20007
20008
|
emit2("update:modelValue", numberValue.value);
|
|
20008
20009
|
}
|
|
20009
20010
|
function formatNumber2(num) {
|
|
@@ -20104,15 +20105,17 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
|
|
|
20104
20105
|
flat: "",
|
|
20105
20106
|
thin: "",
|
|
20106
20107
|
class: "bgl-ctrl-num-btn ctrl-add color-gray top-bgl-ctrl-num-btn",
|
|
20108
|
+
disabled: !canAdd.value,
|
|
20107
20109
|
onClick: increment
|
|
20108
|
-
}),
|
|
20110
|
+
}, null, 8, ["disabled"]),
|
|
20109
20111
|
vue.createVNode(vue.unref(Btn), {
|
|
20110
20112
|
icon: "remove",
|
|
20111
20113
|
flat: "",
|
|
20112
20114
|
thin: "",
|
|
20113
20115
|
class: "bgl-ctrl-num-btn ctrl-remove color-gray",
|
|
20116
|
+
disabled: !canDecrement.value,
|
|
20114
20117
|
onClick: decrement
|
|
20115
|
-
})
|
|
20118
|
+
}, null, 8, ["disabled"])
|
|
20116
20119
|
])) : vue.createCommentVNode("", true)
|
|
20117
20120
|
], 2)
|
|
20118
20121
|
], 8, _hoisted_1$x)
|
|
@@ -20120,7 +20123,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
|
|
|
20120
20123
|
};
|
|
20121
20124
|
}
|
|
20122
20125
|
});
|
|
20123
|
-
const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-
|
|
20126
|
+
const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-a6e0446d"]]);
|
|
20124
20127
|
const _hoisted_1$w = ["value", "autofocus", "onKeydown", "onPaste"];
|
|
20125
20128
|
const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
|
|
20126
20129
|
__name: "OTP",
|
package/dist/index.mjs
CHANGED
|
@@ -19993,15 +19993,16 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
|
|
|
19993
19993
|
const emit2 = __emit;
|
|
19994
19994
|
let numberValue = ref(__props.modelValue || 0);
|
|
19995
19995
|
const btnLayouts = ["horizontal", "vertical"];
|
|
19996
|
+
const canAdd = computed(() => !(__props.max !== void 0 && numberValue.value + __props.step > __props.max));
|
|
19997
|
+
const canDecrement = computed(() => !(__props.min !== void 0 && numberValue.value - __props.step < __props.min));
|
|
19996
19998
|
function increment() {
|
|
19997
|
-
if (
|
|
19998
|
-
numberValue.value
|
|
19999
|
+
if (!canAdd.value) return;
|
|
20000
|
+
numberValue.value += __props.step;
|
|
19999
20001
|
emit2("update:modelValue", numberValue.value);
|
|
20000
20002
|
}
|
|
20001
20003
|
function decrement() {
|
|
20002
|
-
|
|
20003
|
-
|
|
20004
|
-
numberValue.value = numberValue.value - __props.step;
|
|
20004
|
+
if (!canDecrement.value) return;
|
|
20005
|
+
numberValue.value -= __props.step;
|
|
20005
20006
|
emit2("update:modelValue", numberValue.value);
|
|
20006
20007
|
}
|
|
20007
20008
|
function formatNumber2(num) {
|
|
@@ -20102,15 +20103,17 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
|
|
|
20102
20103
|
flat: "",
|
|
20103
20104
|
thin: "",
|
|
20104
20105
|
class: "bgl-ctrl-num-btn ctrl-add color-gray top-bgl-ctrl-num-btn",
|
|
20106
|
+
disabled: !canAdd.value,
|
|
20105
20107
|
onClick: increment
|
|
20106
|
-
}),
|
|
20108
|
+
}, null, 8, ["disabled"]),
|
|
20107
20109
|
createVNode(unref(Btn), {
|
|
20108
20110
|
icon: "remove",
|
|
20109
20111
|
flat: "",
|
|
20110
20112
|
thin: "",
|
|
20111
20113
|
class: "bgl-ctrl-num-btn ctrl-remove color-gray",
|
|
20114
|
+
disabled: !canDecrement.value,
|
|
20112
20115
|
onClick: decrement
|
|
20113
|
-
})
|
|
20116
|
+
}, null, 8, ["disabled"])
|
|
20114
20117
|
])) : createCommentVNode("", true)
|
|
20115
20118
|
], 2)
|
|
20116
20119
|
], 8, _hoisted_1$x)
|
|
@@ -20118,7 +20121,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
|
|
|
20118
20121
|
};
|
|
20119
20122
|
}
|
|
20120
20123
|
});
|
|
20121
|
-
const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-
|
|
20124
|
+
const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-a6e0446d"]]);
|
|
20122
20125
|
const _hoisted_1$w = ["value", "autofocus", "onKeydown", "onPaste"];
|
|
20123
20126
|
const _sfc_main$E = /* @__PURE__ */ defineComponent({
|
|
20124
20127
|
__name: "OTP",
|
package/dist/style.css
CHANGED
|
@@ -1074,30 +1074,30 @@ pre code.hljs{
|
|
|
1074
1074
|
direction: ltr;
|
|
1075
1075
|
}
|
|
1076
1076
|
|
|
1077
|
-
.txtInputIconStart .iconStart[data-v-
|
|
1077
|
+
.txtInputIconStart .iconStart[data-v-a6e0446d] {
|
|
1078
1078
|
color: var(--input-color);
|
|
1079
1079
|
position: absolute;
|
|
1080
1080
|
inset-inline-start:calc(var(--input-height) / 3 - 0.25rem);
|
|
1081
1081
|
margin-top: calc(var(--input-height) / 2 );
|
|
1082
1082
|
line-height: 0;
|
|
1083
1083
|
}
|
|
1084
|
-
.textInputSpinnerWrap .spinner[data-v-
|
|
1084
|
+
.textInputSpinnerWrap .spinner[data-v-a6e0446d] {
|
|
1085
1085
|
color: var(--input-color);
|
|
1086
1086
|
position: absolute;
|
|
1087
1087
|
inset-inline-end: 0;
|
|
1088
1088
|
margin-top: calc(var(--input-height) / -1);
|
|
1089
1089
|
line-height: 0;
|
|
1090
1090
|
}
|
|
1091
|
-
.top-bgl-ctrl-num-btn[data-v-
|
|
1091
|
+
.top-bgl-ctrl-num-btn[data-v-a6e0446d]{
|
|
1092
1092
|
margin-top: calc(var(--input-height) / 10) !important;
|
|
1093
1093
|
}
|
|
1094
|
-
.bgl-ctrl-num-btn[data-v-
|
|
1094
|
+
.bgl-ctrl-num-btn[data-v-a6e0446d]{
|
|
1095
1095
|
height: calc(var(--input-height) / 2.5) !important;
|
|
1096
1096
|
}
|
|
1097
|
-
.bgl-big-ctrl-num-btn[data-v-
|
|
1097
|
+
.bgl-big-ctrl-num-btn[data-v-a6e0446d]{
|
|
1098
1098
|
width: 100% !important;
|
|
1099
1099
|
}
|
|
1100
|
-
.bgl-number-input[data-v-
|
|
1100
|
+
.bgl-number-input[data-v-a6e0446d]{
|
|
1101
1101
|
padding-inline-end: 1.75rem !important;
|
|
1102
1102
|
}
|
|
1103
1103
|
|
package/package.json
CHANGED
|
@@ -45,17 +45,19 @@ let numberValue = $ref(modelValue || 0)
|
|
|
45
45
|
|
|
46
46
|
const btnLayouts: NumberLayout[] = ['horizontal', 'vertical']
|
|
47
47
|
|
|
48
|
+
const canAdd = $computed(() => !(max !== undefined && (numberValue + step) > max))
|
|
49
|
+
const canDecrement = $computed(() => !(min !== undefined && (numberValue - step) < min))
|
|
50
|
+
|
|
48
51
|
// Methods
|
|
49
52
|
function increment() {
|
|
50
|
-
if (
|
|
51
|
-
numberValue
|
|
53
|
+
if (!canAdd) return
|
|
54
|
+
numberValue += step
|
|
52
55
|
emit('update:modelValue', numberValue)
|
|
53
56
|
}
|
|
54
57
|
|
|
55
58
|
function decrement() {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
numberValue = numberValue - step
|
|
59
|
+
if (!canDecrement) return
|
|
60
|
+
numberValue -= step
|
|
59
61
|
emit('update:modelValue', numberValue)
|
|
60
62
|
}
|
|
61
63
|
|
|
@@ -131,10 +133,9 @@ watch(() => modelValue, (newVal) => {
|
|
|
131
133
|
:icon
|
|
132
134
|
/>
|
|
133
135
|
<Btn v-if="layout && btnLayouts.includes(layout)" flat icon="remove" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" @click="decrement" />
|
|
134
|
-
|
|
135
136
|
<div v-if="spinner && (!layout || !btnLayouts.includes(layout))" class="flex column spinner">
|
|
136
|
-
<Btn icon="add" flat thin class="bgl-ctrl-num-btn ctrl-add color-gray top-bgl-ctrl-num-btn" @click="increment" />
|
|
137
|
-
<Btn icon="remove" flat thin class="bgl-ctrl-num-btn ctrl-remove color-gray" @click="decrement" />
|
|
137
|
+
<Btn icon="add" flat thin class="bgl-ctrl-num-btn ctrl-add color-gray top-bgl-ctrl-num-btn" :disabled="!canAdd" @click="increment" />
|
|
138
|
+
<Btn icon="remove" flat thin class="bgl-ctrl-num-btn ctrl-remove color-gray" :disabled="!canDecrement" @click="decrement" />
|
|
138
139
|
</div>
|
|
139
140
|
</div>
|
|
140
141
|
</label>
|