{"version":3,"file":"numberBox.js","sources":["../../../Framework/Controls/numberBox.ts"],"sourcesContent":["// \r\n// Copyright by the Spark Development Network\r\n//\r\n// Licensed under the Rock Community License (the \"License\");\r\n// you may not use this file except in compliance with the License.\r\n// You may obtain a copy of the License at\r\n//\r\n// http://www.rockrms.com/license\r\n//\r\n// Unless required by applicable law or agreed to in writing, software\r\n// distributed under the License is distributed on an \"AS IS\" BASIS,\r\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n// See the License for the specific language governing permissions and\r\n// limitations under the License.\r\n// \r\n\r\nimport { computed, defineComponent, PropType, ref, watch } from \"vue\";\r\nimport { normalizeRules, rulesPropType, ValidationRule } from \"@Obsidian/ValidationRules\";\r\nimport { asFormattedString, toNumberOrNull } from \"@Obsidian/Utility/numberUtils\";\r\nimport RockFormField from \"./rockFormField\";\r\n\r\nexport default defineComponent({\r\n name: \"NumberBox\",\r\n\r\n components: {\r\n RockFormField\r\n },\r\n\r\n props: {\r\n modelValue: {\r\n type: Number as PropType,\r\n default: null\r\n },\r\n placeholder: {\r\n type: String as PropType,\r\n default: \"\"\r\n },\r\n /** The minimum allowed value to be entered. */\r\n minimumValue: {\r\n type: Number as PropType\r\n },\r\n maximumValue: {\r\n type: Number as PropType\r\n },\r\n /** The number of decimal places allowed. */\r\n decimalCount: {\r\n type: Number as PropType,\r\n default: null\r\n },\r\n inputClasses: {\r\n type: String as PropType,\r\n default: \"\"\r\n },\r\n inputGroupClasses: {\r\n type: String as PropType,\r\n default: \"\"\r\n },\r\n rules: rulesPropType\r\n },\r\n\r\n emits: {\r\n \"update:modelValue\": (_value: number | null) => true\r\n },\r\n\r\n setup(props, ctx) {\r\n const internalValue = ref(asFormattedString(props.modelValue, props.decimalCount ?? undefined, { useGrouping: false }));\r\n\r\n const internalNumberValue = computed((): number | null => {\r\n return toNumberOrNull(internalValue.value);\r\n });\r\n\r\n const internalStep = computed((): string => {\r\n return props.decimalCount === null ? \"any\" : (1 / Math.pow(10, props.decimalCount)).toString();\r\n });\r\n\r\n const isInputGroup = computed((): boolean => {\r\n return !!ctx.slots.inputGroupPrepend || !!ctx.slots.inputGroupAppend;\r\n });\r\n\r\n const controlContainerClass = computed((): string => {\r\n return isInputGroup.value ? `input-group ${props.inputGroupClasses}` : \"\";\r\n });\r\n\r\n const computedRules = computed((): ValidationRule[] => {\r\n const rules = normalizeRules(props.rules);\r\n\r\n if (props.maximumValue !== null && props.maximumValue !== undefined) {\r\n rules.push(`lte:${props.maximumValue}`);\r\n }\r\n\r\n if (props.minimumValue !== null && props.minimumValue !== undefined) {\r\n rules.push(`gte:${props.minimumValue}`);\r\n }\r\n\r\n return rules;\r\n });\r\n\r\n watch(() => props.modelValue, () => {\r\n if (props.modelValue !== internalNumberValue.value) {\r\n internalValue.value = asFormattedString(props.modelValue, props.decimalCount ?? undefined, { useGrouping: false });\r\n }\r\n });\r\n\r\n watch(internalNumberValue, () => {\r\n ctx.emit(\"update:modelValue\", internalNumberValue.value);\r\n });\r\n\r\n return {\r\n computedRules,\r\n controlContainerClass,\r\n internalStep,\r\n internalValue\r\n };\r\n },\r\n\r\n template: `\r\n\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n