@cesarechazu/directus-extension-decimal-input 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Cesar Mauricio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,5 @@
+# Decimal Input
+
+Locale-aware numeric input for Directus.
+
+It stores a normalized decimal value and formats the visible value using the browser locale when the field loses focus.

package/dist/index.js

@@ -0,0 +1 @@
+import{defineInterface as e}from"@directus/extensions-sdk";import{ref as t,computed as n,watch as i,resolveComponent as a,openBlock as l,createElementBlock as r,createElementVNode as u,normalizeClass as o,createBlock as m,createCommentVNode as d,normalizeStyle as c,withCtx as s,createTextVNode as f,toDisplayString as p}from"vue";var h=[],v=[];!function(e,t){if(e&&"undefined"!=typeof document){var n,i=!0===t.prepend?"prepend":"append",a=!0===t.singleTag,l="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(a){var r=h.indexOf(l);-1===r&&(r=h.push(l)-1,v[r]={}),n=v[r]&&v[r][i]?v[r][i]:v[r][i]=u()}else n=u();65279===e.charCodeAt(0)&&(e=e.substring(1)),n.styleSheet?n.styleSheet.cssText+=e:n.appendChild(document.createTextNode(e))}function u(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),t.attributes)for(var n=Object.keys(t.attributes),a=0;a<n.length;a++)e.setAttribute(n[a],t.attributes[n[a]]);var r="prepend"===i?"afterbegin":"beforeend";return l.insertAdjacentElement(r,e),e}}("\n.decimal-input-interface[data-v-acef3fed] {\n\twidth: 100%;\n}\n.decimal-input-shell[data-v-acef3fed] {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 100%;\n}\n.decimal-input-field[data-v-acef3fed] {\n\twidth: 100%;\n\theight: var(--theme--form--field--input--height, 44px);\n\tmin-height: var(--theme--form--field--input--height, 44px);\n\tpadding: 10px 12px;\n\tborder: var(--theme--form--field--input--border-width, 1px) solid var(--theme--form--field--input--border-color, var(--theme--border-color, #d3dae4));\n\tborder-radius: var(--theme--border-radius, 8px);\n\tbackground: var(--theme--form--field--input--background, var(--theme--background-page, #fff));\n\tcolor: var(--theme--form--field--input--foreground, var(--theme--foreground, #172940));\n\tfont-size: 14px;\n\tline-height: var(--theme--form--field--input--line-height, 1.4);\n\tbox-sizing: border-box;\n\tappearance: none;\n}\n.decimal-input-field[data-v-acef3fed]:focus {\n\toutline: none;\n\tborder-color: var(--theme--primary, #3399ff);\n\tbox-shadow: 0 0 0 2px color-mix(in srgb, var(--theme--primary, #3399ff) 18%, transparent);\n}\n.decimal-input-field[data-v-acef3fed]:disabled {\n\tcursor: not-allowed;\n\topacity: 0.7;\n}\n.decimal-input-shell.has-left-icon .decimal-input-field[data-v-acef3fed] {\n\tpadding-left: 38px;\n}\n.decimal-input-shell.has-right-icon .decimal-input-field[data-v-acef3fed] {\n\tpadding-right: 38px;\n}\n.decimal-input-icon[data-v-acef3fed] {\n\tposition: absolute;\n\ttop: 50%;\n\ttransform: translateY(-50%);\n\tcolor: var(--theme--foreground-subdued, #6b7c93);\n\tpointer-events: none;\n}\n.decimal-input-icon.left[data-v-acef3fed] {\n\tleft: 12px;\n}\n.decimal-input-icon.right[data-v-acef3fed] {\n\tright: 12px;\n}\n.decimal-input-notice[data-v-acef3fed] {\n\tmargin-top: 8px;\n}\n",{});var g=(e,t)=>{const n=e.__vccOpts||e;for(const[e,i]of t)n[e]=i;return n};function b(e){if(null==e||""===e)return null;const t=Number(String(e).replace(",","."));return Number.isFinite(t)?t:null}function x(e,t,n){if(!Number.isFinite(e))return null;const i=function(e,t){return Number.isFinite(e)?Number(e.toFixed(t)):null}(e,n);if(null===i)return null;return function(e,t){if(!e.includes("."))return e;const[n,i=""]=e.split(".");let a=i;for(;a.length>t&&a.endsWith("0");)a=a.slice(0,-1);return 0===a.length?n:`${n}.${a}`}(i.toFixed(n),t)}function y(e,t,n,i){return Number.isFinite(e)?new Intl.NumberFormat(t,{minimumFractionDigits:n,maximumFractionDigits:i}).format(e):""}function _(e,t,n,i){const a=x(e,n,i);return null===a?"":a.replace(".",t)}function w(e,t){const{sanitized:n,normalized:i,hasTrailingSeparator:a}=function(e,t){let n="",i=String(e??"").split("").filter((e=>/[0-9]/.test(e)||"."===e||","===e||"-"===e||" "===e||" "===e||e===t.group)).join("");i.startsWith("-")&&(n="-",i=i.slice(1)),i=i.replace(/-/g,""),i=i.replace(/[\s\u00A0]/g,"");const a=i.lastIndexOf("."),l=i.lastIndexOf(","),r=Math.max(a,l);let u=i,o="",m=!1;r>=0&&(u=i.slice(0,r),o=i.slice(r+1),m=r===i.length-1),u=u.replace(/\D/g,""),o=o.replace(/\D/g,"");let d=n+u;r>=0&&(d+=t.decimal),o&&(d+=o);let c=n+u;return r>=0&&(c+="."),o&&(c+=o),{sanitized:d,normalized:c,hasTrailingSeparator:m}}(e,t);if(""===i||"-"===i||"."===i||"-."===i)return{sanitized:n,isPartial:!0,value:null};if(a)return{sanitized:n,isPartial:!0,value:null};const l=Number(i);return{sanitized:n,isPartial:!Number.isFinite(l),value:Number.isFinite(l)?l:null}}const F={props:{value:{type:[String,Number],default:null},disabled:{type:Boolean,default:!1},minimum_value:{type:[String,Number],default:null},maximum_value:{type:[String,Number],default:null},minimum_decimals:{type:Number,default:0},maximum_decimals:{type:Number,default:2},icon_left:{type:String,default:null},icon_right:{type:String,default:null},font:{type:String,default:"sans-serif"}},emits:["input"],setup(e,{emit:a}){const l="undefined"!=typeof navigator&&navigator.language?navigator.language:"en-US",r=function(e){const t=new Intl.NumberFormat(e).formatToParts(12345.6);return{decimal:t.find((e=>"decimal"===e.type))?.value||".",group:t.find((e=>"group"===e.type))?.value||","}}(l),u=t(null),o=t(""),m=t(!1),d=t(""),c=n((()=>function(e,t){const n=Number.isInteger(e)?Math.max(0,e):0,i=Number.isInteger(t)?Math.max(0,t):2;return{min:n,max:Math.max(n,i)}}(e.minimum_decimals,e.maximum_decimals))),s=n((()=>{return{fontFamily:(t=e.font,"serif"===t?'Georgia, "Times New Roman", serif':"monospace"===t?'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace':'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif')};var t}));function f(e){const t=b(e);null!==t?m.value?o.value=_(t,r.decimal,c.value.min,c.value.max):o.value=y(t,l,c.value.min,c.value.max):o.value=""}return i((()=>e.value),(e=>{m.value||f(e)}),{immediate:!0}),i((()=>[e.minimum_decimals,e.maximum_decimals]),(()=>{f(e.value)})),{displayValue:o,handleBlur:function(){m.value=!1;const t=w(o.value,r);if(null===t.value)return""===o.value.trim()&&(d.value="",a("input",null)),void f(e.value);const n=function(t,n=!1){const i=b(e.minimum_value),l=b(e.maximum_value),r=function(e,t,n){let i=e;return null!==t&&i<t&&(i=t),null!==n&&i>n&&(i=n),i}(t,i,l),u=x(r,c.value.min,c.value.max);return d.value=r!==t?`Value adjusted to stay between ${i??"-inf"} and ${l??"+inf"}.`:"",null===u?null:((n||String(e.value??"")!==u)&&a("input",u),r)}(t.value,!0);o.value=null===n?"":y(n,l,c.value.min,c.value.max)},handleFocus:function(){m.value=!0;const t=b(e.value);o.value=null===t?o.value:_(t,r.decimal,c.value.min,c.value.max),requestAnimationFrame((()=>{u.value?.select?.()}))},handleInput:function(e){d.value="",o.value=e.target.value},icon_left:e.icon_left,icon_right:e.icon_right,inputRef:u,inputStyle:s,rangeMessage:d}}},S={class:"decimal-input-interface"},N=["value","disabled"];var M=e({id:"decimal-input",name:"Decimal Input",icon:"decimal_increase",description:"Locale-aware decimal input with configurable range, decimals, icons, and font.",component:g(F,[["render",function(e,t,n,i,h,v){const g=a("v-icon"),b=a("v-notice");return l(),r("div",S,[u("div",{class:o(["decimal-input-shell",{"has-left-icon":Boolean(i.icon_left),"has-right-icon":Boolean(i.icon_right)}])},[i.icon_left?(l(),m(g,{key:0,name:i.icon_left,class:"decimal-input-icon left"},null,8,["name"])):d("v-if",!0),u("input",{ref:"inputRef",value:i.displayValue,disabled:n.disabled,style:c(i.inputStyle),class:"decimal-input-field",inputmode:"decimal",type:"text",onFocus:t[0]||(t[0]=(...e)=>i.handleFocus&&i.handleFocus(...e)),onInput:t[1]||(t[1]=(...e)=>i.handleInput&&i.handleInput(...e)),onBlur:t[2]||(t[2]=(...e)=>i.handleBlur&&i.handleBlur(...e))},null,44,N),i.icon_right?(l(),m(g,{key:1,name:i.icon_right,class:"decimal-input-icon right"},null,8,["name"])):d("v-if",!0)],2),i.rangeMessage?(l(),m(b,{key:0,type:"warning",class:"decimal-input-notice"},{default:s((()=>[f(p(i.rangeMessage),1)])),_:1})):d("v-if",!0)])}],["__scopeId","data-v-acef3fed"],["__file","interface.vue"]]),types:["integer","bigInteger","float","decimal"],group:"standard",options:[{field:"minimum_value",type:"string",name:"Minimum Value",meta:{interface:"input",width:"half",options:{placeholder:"0"}}},{field:"maximum_value",type:"string",name:"Maximum Value",meta:{interface:"input",width:"half",options:{placeholder:"999999.99"}}},{field:"minimum_decimals",type:"integer",name:"Minimum Decimals",meta:{interface:"input",width:"half"},schema:{default_value:0}},{field:"maximum_decimals",type:"integer",name:"Maximum Decimals",meta:{interface:"input",width:"half"},schema:{default_value:2}},{field:"icon_left",type:"string",name:"Left Icon",meta:{interface:"select-icon",width:"half"}},{field:"icon_right",type:"string",name:"Right Icon",meta:{interface:"select-icon",width:"half"}},{field:"font",type:"string",name:"Font Family",meta:{interface:"select-dropdown",width:"half",options:{choices:[{text:"Sans serif",value:"sans-serif"},{text:"Serif",value:"serif"},{text:"Monospace",value:"monospace"}]}},schema:{default_value:"sans-serif"}},{field:"info",name:"Behavior",type:"alias",meta:{interface:"presentation-notice",width:"full",options:{text:"You can type with a dot or comma as the decimal separator. The value is formatted using the browser locale when the field loses focus, and it is rounded according to Maximum Decimals."}}}]});export{M as default};

package/package.json

@@ -0,0 +1,43 @@
+{
+	"name": "@cesarechazu/directus-extension-decimal-input",
+	"description": "Locale-aware decimal input for Directus numeric fields.",
+	"icon": "decimal_increase",
+	"version": "1.0.0",
+	"license": "MIT",
+	"author": {
+		"email": "cesarechazu@gmail.com",
+		"name": "cesar"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/cesarechazu/directus-extension-decimal-input.git"
+	},
+	"keywords": [
+		"directus",
+		"directus-extension",
+		"directus-extension-interface",
+		"decimal",
+		"number",
+		"locale"
+	],
+	"type": "module",
+	"files": [
+		"dist"
+	],
+	"directus:extension": {
+		"type": "interface",
+		"path": "dist/index.js",
+		"source": "src/index.js",
+		"host": "^10.10.0"
+	},
+	"scripts": {
+		"build": "directus-extension build",
+		"dev": "directus-extension build -w --no-minify",
+		"link": "directus-extension link",
+		"validate": "directus-extension validate"
+	},
+	"devDependencies": {
+		"@directus/extensions-sdk": "13.0.4",
+		"vue": "^3.5.13"
+	}
+}