UNPKG

@prop-styles/vue

Version:

Process CSS-related properties in Props so that they can generate the element style.

23 lines (22 loc) 4.19 kB
/*! * @prop-styles/vue version 0.0.9 * Author: Capricorncd<capricorncd@qq.com> * Homepage: https://github.com/capricorncd/prop-styles#readme * Released on: 2024-05-08 21:52:46 (GMT+0900) */ (function(r,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],l):(r=typeof globalThis<"u"?globalThis:r||self,l(r["prop-styles"]={},r.vue))})(this,function(r,l){"use strict";/*! * @prop-styles/core version 0.0.11 * Author: Capricorncd<capricorncd@qq.com> * Homepage: https://github.com/capricorncd/prop-styles#readme * Released on: 2024-05-08 21:52:09 (GMT+0900) *//*! * @zx-libs/utils version 0.0.5 * Author: Capricorncd<capricorncd@qq.com> * Homepage: https://github.com/capricorncd/zx-libs/libs/utils#readme * Released on: 2024-04-30 20:19:27 (GMT+0900) *//*! * date-utils-2020 v1.1.1 * Author: Capricorncd * Repository: https://github.com/capricorncd/date-utils-2020#readme * Released on: 2024/04/02 21:28:40 GMT+0900 */function g(t){return typeof t=="string"?/^-?\d+(\.\d+)?$/.test(t):m(t)}function m(t){return Number.isFinite(t)}const h=/^((-?\d+(\.\d+)?)?([a-z]+|%)?\s*)+$/i,y=/(\d+\s|\s-?\d+(\.\d+)?$)/;function a(t,n="px"){if(g(t))return`${t}${n}`;if(t&&typeof t=="string"){const e=t.trim().replace(/\s{2,}/g," ");return h.test(e)&&y.test(e)?e.trim().split(" ").map(i=>a(i,n)).join(" "):e}return""}function b(t="",n="-"){return t.replace(/[A-Z]/g,(e,i)=>`${i>0?n:""}${e.toLowerCase()}`)}function w(t){return typeof t=="boolean"}const j=/^(#[a-f0-9]{3,8}|(rgba?|hsla?|hwb|lab|lch|oklab|oklch|hwb|lch|light-dark)\(.+\))$/i;function k(t){return typeof t!="string"?!1:j.test(t)}function u(t,n,e){return!n&&n!==0?null:[t,e??String(n)]}const o=u;function d(t,n,e){t.forEach(i=>{e[i]=f=>n(i,f)})}function x(t,n){return d(t,(e,i)=>o("display",i,b(e)),n)}function C(t,n){return d(t,(e,i)=>o(e,i,a(i)),n)}function I(t,n){return d(t,(e,i)=>o(e,i),n)}const S=/^-?\d+(\.\d+)?[a-z]+$/i;function $(t){return typeof t=="string"&&S.test(t)}function B(t){return g(t)||$(t)?["borderWidth",a(t)]:k(t)?["borderColor",t]:o("border",t)}function R(t,n,e){let i;for(const f of Object.keys(t))if(i=n[f],i){const c=i(t[f],t);if(c){const[P,A]=c;e[P]=A}}}const T={p:"padding",pt:"paddingTop",pb:"paddingBottom",pl:"paddingLeft",pr:"paddingRight",px:"paddingInline",py:"paddingBlock",m:"margin",mt:"marginTop",mb:"marginBottom",ml:"marginLeft",mr:"marginRight",mx:"marginInline",my:"marginBlock",fs:"fontSize",lh:"lineHeight",bg:"background",fw:"fontWeight",ta:"textAlign",gtc:"tempColumns",gtr:"tempRows",align:"alignItems",ai:"alignItems",ac:"alignContent",ji:"justifyItems",justify:"justifyContent",jc:"justifyContent",t:"top",r:"right",l:"left",b:"bottom",z:"zIndex",tf:"transform"},W=["width","minWidth","maxWidth","height","minHeight","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","paddingInline","paddingBlock","margin","marginTop","marginBottom","marginLeft","marginRight","marginInline","marginBlock","gap","fontSize","lineHeight","top","right","bottom","left","inset"],z=["background","color","alignItems","alignContent","justifyContent","justifyItems","fontWeight","whiteSpace","textAlign","position","zIndex","transform"],v=["flex","grid","inline","inlineFlex","inlineBlock"],s={radius:t=>o("borderRadius",t,a(t)),column:t=>o("flexDirection",t,"column"),wrap:t=>o("flexWrap",t,w(t)?"wrap":t),breakWord:t=>o("overflowWrap",t,"break-word"),bold:t=>o("fontWeight",t,"bold"),thin:t=>o("fontWeight",t,"500"),scroll:t=>o(`overflow${typeof t=="string"?t.toUpperCase():""}`,t,"auto"),border:t=>B(t),tempColumns:t=>o("gridTemplateColumns",t,a(t,"fr")),tempRows:t=>o("gridTemplateRows",t,a(t,"fr")),nowrap:t=>o("whiteSpace",t,"nowrap")};x(v,s),C(W,s),I(z,s);for(const[t,n]of Object.entries(T))if(s[n])s[t]=s[n];else throw new Error(`The alias of ${t} does not exist`);function p(t,n){const e={...t.style},i={...s,...n};return R(t,i,e),e}function L(t,n){return{style:l.computed(()=>{const i=[t.style].flat(),f=p({...t,style:{}},n);return i.push(f),i})}}r.createPropStyles=p,r.f=o,r.formatReturn=u,r.usePropStyles=L,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});