@vuetify/nightly 3.0.0-beta.10 → 3.0.0-beta.13

package/lib/components/VImg/VImg.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VImg.mjs","names":["VResponsive","intersect","makeTransitionProps","MaybeTransition","computed","h","nextTick","onBeforeMount","ref","vShow","watch","withDirectives","convertToUnit","defineComponent","SUPPORTS_INTERSECTION","useRender","VImg","name","directives","props","aspectRatio","String","Number","alt","cover","Boolean","eager","gradient","lazySrc","options","type","Object","default","root","undefined","rootMargin","threshold","sizes","src","srcset","width","emits","setup","emit","slots","currentSrc","image","state","naturalWidth","naturalHeight","normalisedSrc","aspect","value","init","isIntersecting","lazyImg","Image","pollForSize","complete","onError","onLoad","getSrc","img","timeout","poll","imgHeight","imgWidth","setTimeout","endsWith","startsWith","containClasses","__image","class","sources","transition","__preloadImage","__placeholder","placeholder","error","__error","__gradient","backgroundImage","isBooted","stop","val","requestAnimationFrame","additional","handler"],"sources":["../../../src/components/VImg/VImg.tsx"],"sourcesContent":["import './VImg.sass'\n\n// Components\nimport { VResponsive } from '@/components/VResponsive'\n\n// Directives\nimport intersect from '@/directives/intersect'\n\n// Composables\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\n\n// Utilities\nimport {\n  computed,\n  h,\n  nextTick,\n  onBeforeMount,\n  ref,\n  vShow,\n  watch,\n  withDirectives,\n} from 'vue'\nimport {\n  convertToUnit,\n  defineComponent,\n  SUPPORTS_INTERSECTION,\n  useRender,\n} from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\n// not intended for public use, this is passed in by vuetify-loader\nexport interface srcObject {\n  src?: string\n  srcset?: string\n  lazySrc?: string\n  aspect: number\n}\n\nexport const VImg = defineComponent({\n  name: 'VImg',\n\n  directives: { intersect },\n\n  props: {\n    aspectRatio: [String, Number],\n    alt: String,\n    cover: Boolean,\n    eager: Boolean,\n    gradient: String,\n    lazySrc: String,\n    options: {\n      type: Object as PropType<IntersectionObserverInit>,\n      // For more information on types, navigate to:\n      // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\n      default: () => ({\n        root: undefined,\n        rootMargin: undefined,\n        threshold: undefined,\n      }),\n    },\n    sizes: String,\n    src: {\n      type: [String, Object] as PropType<string | srcObject>,\n      default: '',\n    },\n    srcset: String,\n    width: [String, Number],\n\n    ...makeTransitionProps(),\n  },\n\n  emits: ['loadstart', 'load', 'error'],\n\n  setup (props, { emit, slots }) {\n    const currentSrc = ref('') // Set from srcset\n    const image = ref<HTMLImageElement>()\n    const state = ref<'idle' | 'loading' | 'loaded' | 'error'>(props.eager ? 'loading' : 'idle')\n    const naturalWidth = ref<number>()\n    const naturalHeight = ref<number>()\n\n    const normalisedSrc = computed<srcObject>(() => {\n      return props.src && typeof props.src === 'object'\n        ? {\n          src: props.src.src,\n          srcset: props.srcset || props.src.srcset,\n          lazySrc: props.lazySrc || props.src.lazySrc,\n          aspect: Number(props.aspectRatio || props.src.aspect),\n        } : {\n          src: props.src,\n          srcset: props.srcset,\n          lazySrc: props.lazySrc,\n          aspect: Number(props.aspectRatio || 0),\n        }\n    })\n    const aspectRatio = computed(() => {\n      return normalisedSrc.value.aspect || naturalWidth.value! / naturalHeight.value! || 0\n    })\n\n    watch(() => props.src, () => {\n      init(state.value !== 'idle')\n    })\n    // TODO: getSrc when window width changes\n\n    onBeforeMount(() => init())\n\n    function init (isIntersecting?: boolean) {\n      if (props.eager && isIntersecting) return\n      if (\n        SUPPORTS_INTERSECTION &&\n        !isIntersecting &&\n        !props.eager\n      ) return\n\n      state.value = 'loading'\n\n      if (normalisedSrc.value.lazySrc) {\n        const lazyImg = new Image()\n        lazyImg.src = normalisedSrc.value.lazySrc\n        pollForSize(lazyImg, null)\n      }\n\n      if (!normalisedSrc.value.src) return\n\n      nextTick(() => {\n        emit('loadstart', image.value?.currentSrc || normalisedSrc.value.src)\n\n        if (image.value?.complete) {\n          if (!image.value.naturalWidth) {\n            onError()\n          }\n\n          if (state.value === 'error') return\n\n          if (!aspectRatio.value) pollForSize(image.value, null)\n          onLoad()\n        } else {\n          if (!aspectRatio.value) pollForSize(image.value!)\n          getSrc()\n        }\n      })\n    }\n\n    function onLoad () {\n      getSrc()\n      state.value = 'loaded'\n      emit('load', image.value?.currentSrc || normalisedSrc.value.src)\n    }\n\n    function onError () {\n      state.value = 'error'\n      emit('error', image.value?.currentSrc || normalisedSrc.value.src)\n    }\n\n    function getSrc () {\n      const img = image.value\n      if (img) currentSrc.value = img.currentSrc || img.src\n    }\n\n    function pollForSize (img: HTMLImageElement, timeout: number | null = 100) {\n      const poll = () => {\n        const { naturalHeight: imgHeight, naturalWidth: imgWidth } = img\n\n        if (imgHeight || imgWidth) {\n          naturalWidth.value = imgWidth\n          naturalHeight.value = imgHeight\n        } else if (!img.complete && state.value === 'loading' && timeout != null) {\n          setTimeout(poll, timeout)\n        } else if (img.currentSrc.endsWith('.svg') || img.currentSrc.startsWith('data:image/svg+xml')) {\n          naturalWidth.value = 1\n          naturalHeight.value = 1\n        }\n      }\n\n      poll()\n    }\n\n    const containClasses = computed(() => ({\n      'v-img__img--cover': props.cover,\n      'v-img__img--contain': !props.cover,\n    }))\n\n    const __image = computed(() => {\n      if (!normalisedSrc.value.src || state.value === 'idle') return\n\n      const img = h('img', {\n        class: ['v-img__img', containClasses.value],\n        src: normalisedSrc.value.src,\n        srcset: normalisedSrc.value.srcset,\n        alt: '',\n        sizes: props.sizes,\n        ref: image,\n        onLoad,\n        onError,\n      })\n\n      const sources = slots.sources?.()\n\n      return (\n        <MaybeTransition transition={ props.transition } appear>\n          {\n            withDirectives(\n              sources\n                ? <picture class=\"v-img__picture\">{ sources }{ img }</picture>\n                : img,\n              [[vShow, state.value === 'loaded']]\n            )\n          }\n        </MaybeTransition>\n      )\n    })\n\n    const __preloadImage = computed(() => (\n      <MaybeTransition transition={ props.transition }>\n        { normalisedSrc.value.lazySrc && state.value !== 'loaded' && (\n          <img\n            class={['v-img__img', 'v-img__img--preload', containClasses.value]}\n            src={ normalisedSrc.value.lazySrc }\n            alt=\"\"\n          />\n        )}\n      </MaybeTransition>\n    ))\n\n    const __placeholder = computed(() => {\n      if (!slots.placeholder) return\n\n      return (\n        <MaybeTransition transition={ props.transition } appear>\n          { (state.value === 'loading' || (state.value === 'error' && !slots.error)) &&\n          <div class=\"v-img__placeholder\">{ slots.placeholder() }</div>\n          }\n        </MaybeTransition>\n      )\n    })\n\n    const __error = computed(() => {\n      if (!slots.error) return\n\n      return (\n        <MaybeTransition transition={ props.transition } appear>\n          { state.value === 'error' &&\n            <div class=\"v-img__error\">{ slots.error() }</div>\n          }\n        </MaybeTransition>\n      )\n    })\n\n    const __gradient = computed(() => {\n      if (!props.gradient) return\n\n      return <div class=\"v-img__gradient\" style={{ backgroundImage: `linear-gradient(${props.gradient})` }} />\n    })\n\n    const isBooted = ref(false)\n    {\n      const stop = watch(aspectRatio, val => {\n        if (val) {\n          // Doesn't work with nextTick, idk why\n          requestAnimationFrame(() => {\n            requestAnimationFrame(() => {\n              isBooted.value = true\n            })\n          })\n          stop()\n        }\n      })\n    }\n\n    useRender(() => (\n      <VResponsive\n        class={[\n          'v-img',\n          { 'v-img--booting': !isBooted.value },\n        ]}\n        style={{ width: convertToUnit(props.width === 'auto' ? naturalWidth.value : props.width) }}\n        aspectRatio={ aspectRatio.value }\n        aria-label={ props.alt }\n        role={ props.alt ? 'img' : undefined }\n        v-intersect={[{\n          handler: init,\n          options: props.options,\n        }, null, ['once']]}\n        v-slots={{\n          additional: () => [__image.value, __preloadImage.value, __gradient.value, __placeholder.value, __error.value],\n          default: slots.default,\n        }}\n      />\n    ))\n\n    return {\n      currentSrc,\n      image,\n      state,\n      naturalWidth,\n      naturalHeight,\n    }\n  },\n})\n\nexport type VImg = InstanceType<typeof VImg>\n"],"mappings":";AAAA,oB,CAEA;;SACSA,W,oCAET;;OACOC,S,8CAEP;;SACSC,mB,EAAqBC,e,4CAE9B;;AACA,SACEC,QADF,EAEEC,CAFF,EAGEC,QAHF,EAIEC,aAJF,EAKEC,GALF,EAMEC,KANF,EAOEC,KAPF,EAQEC,cARF,QASO,KATP;SAWEC,a,EACAC,e,EACAC,qB,EACAC,S,gCAGF;;AAWA,OAAO,MAAMC,IAAI,GAAGH,eAAe,CAAC;EAClCI,IAAI,EAAE,MAD4B;EAGlCC,UAAU,EAAE;IAAEjB;EAAF,CAHsB;EAKlCkB,KAAK,EAAE;IACLC,WAAW,EAAE,CAACC,MAAD,EAASC,MAAT,CADR;IAELC,GAAG,EAAEF,MAFA;IAGLG,KAAK,EAAEC,OAHF;IAILC,KAAK,EAAED,OAJF;IAKLE,QAAQ,EAAEN,MALL;IAMLO,OAAO,EAAEP,MANJ;IAOLQ,OAAO,EAAE;MACPC,IAAI,EAAEC,MADC;MAEP;MACA;MACAC,OAAO,EAAE,OAAO;QACdC,IAAI,EAAEC,SADQ;QAEdC,UAAU,EAAED,SAFE;QAGdE,SAAS,EAAEF;MAHG,CAAP;IAJF,CAPJ;IAiBLG,KAAK,EAAEhB,MAjBF;IAkBLiB,GAAG,EAAE;MACHR,IAAI,EAAE,CAACT,MAAD,EAASU,MAAT,CADH;MAEHC,OAAO,EAAE;IAFN,CAlBA;IAsBLO,MAAM,EAAElB,MAtBH;IAuBLmB,KAAK,EAAE,CAACnB,MAAD,EAASC,MAAT,CAvBF;IAyBL,GAAGpB,mBAAmB;EAzBjB,CAL2B;EAiClCuC,KAAK,EAAE,CAAC,WAAD,EAAc,MAAd,EAAsB,OAAtB,CAjC2B;;EAmClCC,KAAK,CAAEvB,KAAF,QAA0B;IAAA,IAAjB;MAAEwB,IAAF;MAAQC;IAAR,CAAiB;IAC7B,MAAMC,UAAU,GAAGrC,GAAG,CAAC,EAAD,CAAtB,CAD6B,CACF;;IAC3B,MAAMsC,KAAK,GAAGtC,GAAG,EAAjB;IACA,MAAMuC,KAAK,GAAGvC,GAAG,CAA0CW,KAAK,CAACO,KAAN,GAAc,SAAd,GAA0B,MAApE,CAAjB;IACA,MAAMsB,YAAY,GAAGxC,GAAG,EAAxB;IACA,MAAMyC,aAAa,GAAGzC,GAAG,EAAzB;IAEA,MAAM0C,aAAa,GAAG9C,QAAQ,CAAY,MAAM;MAC9C,OAAOe,KAAK,CAACmB,GAAN,IAAa,OAAOnB,KAAK,CAACmB,GAAb,KAAqB,QAAlC,GACH;QACAA,GAAG,EAAEnB,KAAK,CAACmB,GAAN,CAAUA,GADf;QAEAC,MAAM,EAAEpB,KAAK,CAACoB,MAAN,IAAgBpB,KAAK,CAACmB,GAAN,CAAUC,MAFlC;QAGAX,OAAO,EAAET,KAAK,CAACS,OAAN,IAAiBT,KAAK,CAACmB,GAAN,CAAUV,OAHpC;QAIAuB,MAAM,EAAE7B,MAAM,CAACH,KAAK,CAACC,WAAN,IAAqBD,KAAK,CAACmB,GAAN,CAAUa,MAAhC;MAJd,CADG,GAMD;QACFb,GAAG,EAAEnB,KAAK,CAACmB,GADT;QAEFC,MAAM,EAAEpB,KAAK,CAACoB,MAFZ;QAGFX,OAAO,EAAET,KAAK,CAACS,OAHb;QAIFuB,MAAM,EAAE7B,MAAM,CAACH,KAAK,CAACC,WAAN,IAAqB,CAAtB;MAJZ,CANN;IAYD,CAb6B,CAA9B;IAcA,MAAMA,WAAW,GAAGhB,QAAQ,CAAC,MAAM;MACjC,OAAO8C,aAAa,CAACE,KAAd,CAAoBD,MAApB,IAA8BH,YAAY,CAACI,KAAb,GAAsBH,aAAa,CAACG,KAAlE,IAA4E,CAAnF;IACD,CAF2B,CAA5B;IAIA1C,KAAK,CAAC,MAAMS,KAAK,CAACmB,GAAb,EAAkB,MAAM;MAC3Be,IAAI,CAACN,KAAK,CAACK,KAAN,KAAgB,MAAjB,CAAJ;IACD,CAFI,CAAL,CAzB6B,CA4B7B;;IAEA7C,aAAa,CAAC,MAAM8C,IAAI,EAAX,CAAb;;IAEA,SAASA,IAAT,CAAeC,cAAf,EAAyC;MACvC,IAAInC,KAAK,CAACO,KAAN,IAAe4B,cAAnB,EAAmC;MACnC,IACExC,qBAAqB,IACrB,CAACwC,cADD,IAEA,CAACnC,KAAK,CAACO,KAHT,EAIE;MAEFqB,KAAK,CAACK,KAAN,GAAc,SAAd;;MAEA,IAAIF,aAAa,CAACE,KAAd,CAAoBxB,OAAxB,EAAiC;QAC/B,MAAM2B,OAAO,GAAG,IAAIC,KAAJ,EAAhB;QACAD,OAAO,CAACjB,GAAR,GAAcY,aAAa,CAACE,KAAd,CAAoBxB,OAAlC;QACA6B,WAAW,CAACF,OAAD,EAAU,IAAV,CAAX;MACD;;MAED,IAAI,CAACL,aAAa,CAACE,KAAd,CAAoBd,GAAzB,EAA8B;MAE9BhC,QAAQ,CAAC,MAAM;QAAA;;QACbqC,IAAI,CAAC,WAAD,EAAc,iBAAAG,KAAK,CAACM,KAAN,kCAAaP,UAAb,KAA2BK,aAAa,CAACE,KAAd,CAAoBd,GAA7D,CAAJ;;QAEA,qBAAIQ,KAAK,CAACM,KAAV,aAAI,cAAaM,QAAjB,EAA2B;UACzB,IAAI,CAACZ,KAAK,CAACM,KAAN,CAAYJ,YAAjB,EAA+B;YAC7BW,OAAO;UACR;;UAED,IAAIZ,KAAK,CAACK,KAAN,KAAgB,OAApB,EAA6B;UAE7B,IAAI,CAAChC,WAAW,CAACgC,KAAjB,EAAwBK,WAAW,CAACX,KAAK,CAACM,KAAP,EAAc,IAAd,CAAX;UACxBQ,MAAM;QACP,CATD,MASO;UACL,IAAI,CAACxC,WAAW,CAACgC,KAAjB,EAAwBK,WAAW,CAACX,KAAK,CAACM,KAAP,CAAX;UACxBS,MAAM;QACP;MACF,CAhBO,CAAR;IAiBD;;IAED,SAASD,MAAT,GAAmB;MAAA;;MACjBC,MAAM;MACNd,KAAK,CAACK,KAAN,GAAc,QAAd;MACAT,IAAI,CAAC,MAAD,EAAS,kBAAAG,KAAK,CAACM,KAAN,mCAAaP,UAAb,KAA2BK,aAAa,CAACE,KAAd,CAAoBd,GAAxD,CAAJ;IACD;;IAED,SAASqB,OAAT,GAAoB;MAAA;;MAClBZ,KAAK,CAACK,KAAN,GAAc,OAAd;MACAT,IAAI,CAAC,OAAD,EAAU,kBAAAG,KAAK,CAACM,KAAN,mCAAaP,UAAb,KAA2BK,aAAa,CAACE,KAAd,CAAoBd,GAAzD,CAAJ;IACD;;IAED,SAASuB,MAAT,GAAmB;MACjB,MAAMC,GAAG,GAAGhB,KAAK,CAACM,KAAlB;MACA,IAAIU,GAAJ,EAASjB,UAAU,CAACO,KAAX,GAAmBU,GAAG,CAACjB,UAAJ,IAAkBiB,GAAG,CAACxB,GAAzC;IACV;;IAED,SAASmB,WAAT,CAAsBK,GAAtB,EAA2E;MAAA,IAA9BC,OAA8B,uEAAL,GAAK;;MACzE,MAAMC,IAAI,GAAG,MAAM;QACjB,MAAM;UAAEf,aAAa,EAAEgB,SAAjB;UAA4BjB,YAAY,EAAEkB;QAA1C,IAAuDJ,GAA7D;;QAEA,IAAIG,SAAS,IAAIC,QAAjB,EAA2B;UACzBlB,YAAY,CAACI,KAAb,GAAqBc,QAArB;UACAjB,aAAa,CAACG,KAAd,GAAsBa,SAAtB;QACD,CAHD,MAGO,IAAI,CAACH,GAAG,CAACJ,QAAL,IAAiBX,KAAK,CAACK,KAAN,KAAgB,SAAjC,IAA8CW,OAAO,IAAI,IAA7D,EAAmE;UACxEI,UAAU,CAACH,IAAD,EAAOD,OAAP,CAAV;QACD,CAFM,MAEA,IAAID,GAAG,CAACjB,UAAJ,CAAeuB,QAAf,CAAwB,MAAxB,KAAmCN,GAAG,CAACjB,UAAJ,CAAewB,UAAf,CAA0B,oBAA1B,CAAvC,EAAwF;UAC7FrB,YAAY,CAACI,KAAb,GAAqB,CAArB;UACAH,aAAa,CAACG,KAAd,GAAsB,CAAtB;QACD;MACF,CAZD;;MAcAY,IAAI;IACL;;IAED,MAAMM,cAAc,GAAGlE,QAAQ,CAAC,OAAO;MACrC,qBAAqBe,KAAK,CAACK,KADU;MAErC,uBAAuB,CAACL,KAAK,CAACK;IAFO,CAAP,CAAD,CAA/B;;IAKA,MAAM+C,OAAO,GAAGnE,QAAQ,CAAC,MAAM;MAAA;;MAC7B,IAAI,CAAC8C,aAAa,CAACE,KAAd,CAAoBd,GAArB,IAA4BS,KAAK,CAACK,KAAN,KAAgB,MAAhD,EAAwD;MAExD,MAAMU,GAAG,GAAGzD,CAAC,CAAC,KAAD,EAAQ;QACnBmE,KAAK,EAAE,CAAC,YAAD,EAAeF,cAAc,CAAClB,KAA9B,CADY;QAEnBd,GAAG,EAAEY,aAAa,CAACE,KAAd,CAAoBd,GAFN;QAGnBC,MAAM,EAAEW,aAAa,CAACE,KAAd,CAAoBb,MAHT;QAInBhB,GAAG,EAAE,EAJc;QAKnBc,KAAK,EAAElB,KAAK,CAACkB,KALM;QAMnB7B,GAAG,EAAEsC,KANc;QAOnBc,MAPmB;QAQnBD;MARmB,CAAR,CAAb;MAWA,MAAMc,OAAO,qBAAG7B,KAAK,CAAC6B,OAAT,qBAAG,oBAAA7B,KAAK,CAArB;MAEA;QAAA,cACgCzB,KAAK,CAACuD,UADtC;QAAA;MAAA;QAAA,gBAGM/D,cAAc,CACZ8D,OAAO;UAAA,SACY;QADZ,IAC+BA,OAD/B,EAC0CX,GAD1C,KAEHA,GAHQ,EAIZ,CAAC,CAACrD,KAAD,EAAQsC,KAAK,CAACK,KAAN,KAAgB,QAAxB,CAAD,CAJY,CAHpB;MAAA;IAYD,CA5BuB,CAAxB;;IA8BA,MAAMuB,cAAc,GAAGvE,QAAQ,CAAC;MAAA,cACAe,KAAK,CAACuD;IADN;MAAA,gBAE1BxB,aAAa,CAACE,KAAd,CAAoBxB,OAApB,IAA+BmB,KAAK,CAACK,KAAN,KAAgB,QAA/C;QAAA,SAES,CAAC,YAAD,EAAe,qBAAf,EAAsCkB,cAAc,CAAClB,KAArD,CAFT;QAAA,OAGQF,aAAa,CAACE,KAAd,CAAoBxB,OAH5B;QAAA,OAIM;MAJN,QAF0B;IAAA,EAAD,CAA/B;;IAYA,MAAMgD,aAAa,GAAGxE,QAAQ,CAAC,MAAM;MACnC,IAAI,CAACwC,KAAK,CAACiC,WAAX,EAAwB;MAExB;QAAA,cACgC1D,KAAK,CAACuD,UADtC;QAAA;MAAA;QAAA,gBAEM,CAAC3B,KAAK,CAACK,KAAN,KAAgB,SAAhB,IAA8BL,KAAK,CAACK,KAAN,KAAgB,OAAhB,IAA2B,CAACR,KAAK,CAACkC,KAAjE;UAAA,SACS;QADT,IACgClC,KAAK,CAACiC,WAAN,EADhC,EAFN;MAAA;IAOD,CAV6B,CAA9B;;IAYA,MAAME,OAAO,GAAG3E,QAAQ,CAAC,MAAM;MAC7B,IAAI,CAACwC,KAAK,CAACkC,KAAX,EAAkB;MAElB;QAAA,cACgC3D,KAAK,CAACuD,UADtC;QAAA;MAAA;QAAA,gBAEM3B,KAAK,CAACK,KAAN,KAAgB,OAAhB;UAAA,SACW;QADX,IAC4BR,KAAK,CAACkC,KAAN,EAD5B,EAFN;MAAA;IAOD,CAVuB,CAAxB;;IAYA,MAAME,UAAU,GAAG5E,QAAQ,CAAC,MAAM;MAChC,IAAI,CAACe,KAAK,CAACQ,QAAX,EAAqB;MAErB;QAAA,SAAkB,iBAAlB;QAAA,SAA2C;UAAEsD,eAAe,EAAG,mBAAkB9D,KAAK,CAACQ,QAAS;QAArD;MAA3C;IACD,CAJ0B,CAA3B;;IAMA,MAAMuD,QAAQ,GAAG1E,GAAG,CAAC,KAAD,CAApB;IACA;MACE,MAAM2E,IAAI,GAAGzE,KAAK,CAACU,WAAD,EAAcgE,GAAG,IAAI;QACrC,IAAIA,GAAJ,EAAS;UACP;UACAC,qBAAqB,CAAC,MAAM;YAC1BA,qBAAqB,CAAC,MAAM;cAC1BH,QAAQ,CAAC9B,KAAT,GAAiB,IAAjB;YACD,CAFoB,CAArB;UAGD,CAJoB,CAArB;UAKA+B,IAAI;QACL;MACF,CAViB,CAAlB;IAWD;IAEDpE,SAAS,CAAC;MAAA,SAEC,CACL,OADK,EAEL;QAAE,kBAAkB,CAACmE,QAAQ,CAAC9B;MAA9B,CAFK,CAFD;MAAA,SAMC;QAAEZ,KAAK,EAAE5B,aAAa,CAACO,KAAK,CAACqB,KAAN,KAAgB,MAAhB,GAAyBQ,YAAY,CAACI,KAAtC,GAA8CjC,KAAK,CAACqB,KAArD;MAAtB,CAND;MAAA,eAOQpB,WAAW,CAACgC,KAPpB;MAAA,cAQOjC,KAAK,CAACI,GARb;MAAA,QASCJ,KAAK,CAACI,GAAN,GAAY,KAAZ,GAAoBW;IATrB,GAcG;MACPoD,UAAU,EAAE,MAAM,CAACf,OAAO,CAACnB,KAAT,EAAgBuB,cAAc,CAACvB,KAA/B,EAAsC4B,UAAU,CAAC5B,KAAjD,EAAwDwB,aAAa,CAACxB,KAAtE,EAA6E2B,OAAO,CAAC3B,KAArF,CADX;MAEPpB,OAAO,EAAEY,KAAK,CAACZ;IAFR,CAdH,qCAUQ;MACZuD,OAAO,EAAElC,IADG;MAEZxB,OAAO,EAAEV,KAAK,CAACU;IAFH,CAVR,EAaH,IAbG;MAAA;IAAA,IAAD,CAAT;IAqBA,OAAO;MACLgB,UADK;MAELC,KAFK;MAGLC,KAHK;MAILC,YAJK;MAKLC;IALK,CAAP;EAOD;;AAlQiC,CAAD,CAA5B"}
+{"version":3,"file":"VImg.mjs","names":["VResponsive","intersect","makeTransitionProps","MaybeTransition","computed","nextTick","onBeforeMount","ref","vShow","watch","withDirectives","convertToUnit","defineComponent","SUPPORTS_INTERSECTION","useRender","VImg","name","directives","props","aspectRatio","String","Number","alt","cover","Boolean","eager","gradient","lazySrc","options","type","Object","default","root","undefined","rootMargin","threshold","sizes","src","srcset","width","emits","setup","emit","slots","currentSrc","image","state","naturalWidth","naturalHeight","normalisedSrc","aspect","value","init","isIntersecting","lazyImg","Image","pollForSize","complete","onError","onLoad","getSrc","img","timeout","poll","imgHeight","imgWidth","setTimeout","endsWith","startsWith","containClasses","__image","sources","transition","__preloadImage","__placeholder","placeholder","error","__error","__gradient","backgroundImage","isBooted","stop","val","requestAnimationFrame","additional","handler"],"sources":["../../../src/components/VImg/VImg.tsx"],"sourcesContent":["import './VImg.sass'\n\n// Components\nimport { VResponsive } from '@/components/VResponsive'\n\n// Directives\nimport intersect from '@/directives/intersect'\n\n// Composables\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\n\n// Utilities\nimport {\n  computed,\n  nextTick,\n  onBeforeMount,\n  ref,\n  vShow,\n  watch,\n  withDirectives,\n} from 'vue'\nimport {\n  convertToUnit,\n  defineComponent,\n  SUPPORTS_INTERSECTION,\n  useRender,\n} from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\n// not intended for public use, this is passed in by vuetify-loader\nexport interface srcObject {\n  src?: string\n  srcset?: string\n  lazySrc?: string\n  aspect: number\n}\n\nexport const VImg = defineComponent({\n  name: 'VImg',\n\n  directives: { intersect },\n\n  props: {\n    aspectRatio: [String, Number],\n    alt: String,\n    cover: Boolean,\n    eager: Boolean,\n    gradient: String,\n    lazySrc: String,\n    options: {\n      type: Object as PropType<IntersectionObserverInit>,\n      // For more information on types, navigate to:\n      // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\n      default: () => ({\n        root: undefined,\n        rootMargin: undefined,\n        threshold: undefined,\n      }),\n    },\n    sizes: String,\n    src: {\n      type: [String, Object] as PropType<string | srcObject>,\n      default: '',\n    },\n    srcset: String,\n    width: [String, Number],\n\n    ...makeTransitionProps(),\n  },\n\n  emits: ['loadstart', 'load', 'error'],\n\n  setup (props, { emit, slots }) {\n    const currentSrc = ref('') // Set from srcset\n    const image = ref<HTMLImageElement>()\n    const state = ref<'idle' | 'loading' | 'loaded' | 'error'>(props.eager ? 'loading' : 'idle')\n    const naturalWidth = ref<number>()\n    const naturalHeight = ref<number>()\n\n    const normalisedSrc = computed<srcObject>(() => {\n      return props.src && typeof props.src === 'object'\n        ? {\n          src: props.src.src,\n          srcset: props.srcset || props.src.srcset,\n          lazySrc: props.lazySrc || props.src.lazySrc,\n          aspect: Number(props.aspectRatio || props.src.aspect),\n        } : {\n          src: props.src,\n          srcset: props.srcset,\n          lazySrc: props.lazySrc,\n          aspect: Number(props.aspectRatio || 0),\n        }\n    })\n    const aspectRatio = computed(() => {\n      return normalisedSrc.value.aspect || naturalWidth.value! / naturalHeight.value! || 0\n    })\n\n    watch(() => props.src, () => {\n      init(state.value !== 'idle')\n    })\n    // TODO: getSrc when window width changes\n\n    onBeforeMount(() => init())\n\n    function init (isIntersecting?: boolean) {\n      if (props.eager && isIntersecting) return\n      if (\n        SUPPORTS_INTERSECTION &&\n        !isIntersecting &&\n        !props.eager\n      ) return\n\n      state.value = 'loading'\n\n      if (normalisedSrc.value.lazySrc) {\n        const lazyImg = new Image()\n        lazyImg.src = normalisedSrc.value.lazySrc\n        pollForSize(lazyImg, null)\n      }\n\n      if (!normalisedSrc.value.src) return\n\n      nextTick(() => {\n        emit('loadstart', image.value?.currentSrc || normalisedSrc.value.src)\n\n        if (image.value?.complete) {\n          if (!image.value.naturalWidth) {\n            onError()\n          }\n\n          if (state.value === 'error') return\n\n          if (!aspectRatio.value) pollForSize(image.value, null)\n          onLoad()\n        } else {\n          if (!aspectRatio.value) pollForSize(image.value!)\n          getSrc()\n        }\n      })\n    }\n\n    function onLoad () {\n      getSrc()\n      state.value = 'loaded'\n      emit('load', image.value?.currentSrc || normalisedSrc.value.src)\n    }\n\n    function onError () {\n      state.value = 'error'\n      emit('error', image.value?.currentSrc || normalisedSrc.value.src)\n    }\n\n    function getSrc () {\n      const img = image.value\n      if (img) currentSrc.value = img.currentSrc || img.src\n    }\n\n    function pollForSize (img: HTMLImageElement, timeout: number | null = 100) {\n      const poll = () => {\n        const { naturalHeight: imgHeight, naturalWidth: imgWidth } = img\n\n        if (imgHeight || imgWidth) {\n          naturalWidth.value = imgWidth\n          naturalHeight.value = imgHeight\n        } else if (!img.complete && state.value === 'loading' && timeout != null) {\n          setTimeout(poll, timeout)\n        } else if (img.currentSrc.endsWith('.svg') || img.currentSrc.startsWith('data:image/svg+xml')) {\n          naturalWidth.value = 1\n          naturalHeight.value = 1\n        }\n      }\n\n      poll()\n    }\n\n    const containClasses = computed(() => ({\n      'v-img__img--cover': props.cover,\n      'v-img__img--contain': !props.cover,\n    }))\n\n    const __image = () => {\n      if (!normalisedSrc.value.src || state.value === 'idle') return null\n\n      const img = (\n        <img\n          class={['v-img__img', containClasses.value]}\n          src={ normalisedSrc.value.src }\n          srcset={ normalisedSrc.value.srcset }\n          alt=\"\"\n          sizes={ props.sizes }\n          ref={ image }\n          onLoad={ onLoad }\n          onError={ onError }\n        />\n      )\n\n      const sources = slots.sources?.()\n\n      return (\n        <MaybeTransition transition={ props.transition } appear>\n          {\n            withDirectives(\n              sources\n                ? <picture class=\"v-img__picture\">{ sources }{ img }</picture>\n                : img,\n              [[vShow, state.value === 'loaded']]\n            )\n          }\n        </MaybeTransition>\n      )\n    }\n\n    const __preloadImage = () => (\n      <MaybeTransition transition={ props.transition }>\n        { normalisedSrc.value.lazySrc && state.value !== 'loaded' && (\n          <img\n            class={['v-img__img', 'v-img__img--preload', containClasses.value]}\n            src={ normalisedSrc.value.lazySrc }\n            alt=\"\"\n          />\n        )}\n      </MaybeTransition>\n    )\n\n    const __placeholder = () => {\n      if (!slots.placeholder) return null\n\n      return (\n        <MaybeTransition transition={ props.transition } appear>\n          { (state.value === 'loading' || (state.value === 'error' && !slots.error)) &&\n          <div class=\"v-img__placeholder\">{ slots.placeholder() }</div>\n          }\n        </MaybeTransition>\n      )\n    }\n\n    const __error = () => {\n      if (!slots.error) return null\n\n      return (\n        <MaybeTransition transition={ props.transition } appear>\n          { state.value === 'error' &&\n            <div class=\"v-img__error\">{ slots.error() }</div>\n          }\n        </MaybeTransition>\n      )\n    }\n\n    const __gradient = () => {\n      if (!props.gradient) return null\n\n      return <div class=\"v-img__gradient\" style={{ backgroundImage: `linear-gradient(${props.gradient})` }} />\n    }\n\n    const isBooted = ref(false)\n    {\n      const stop = watch(aspectRatio, val => {\n        if (val) {\n          // Doesn't work with nextTick, idk why\n          requestAnimationFrame(() => {\n            requestAnimationFrame(() => {\n              isBooted.value = true\n            })\n          })\n          stop()\n        }\n      })\n    }\n\n    useRender(() => (\n      <VResponsive\n        class={[\n          'v-img',\n          { 'v-img--booting': !isBooted.value },\n        ]}\n        style={{ width: convertToUnit(props.width === 'auto' ? naturalWidth.value : props.width) }}\n        aspectRatio={ aspectRatio.value }\n        aria-label={ props.alt }\n        role={ props.alt ? 'img' : undefined }\n        v-intersect={[{\n          handler: init,\n          options: props.options,\n        }, null, ['once']]}\n      >{{\n        additional: () => (\n          <>\n            <__image />\n            <__preloadImage />\n            <__gradient />\n            <__placeholder />\n            <__error />\n          </>\n        ),\n        default: slots.default,\n      }}</VResponsive>\n    ))\n\n    return {\n      currentSrc,\n      image,\n      state,\n      naturalWidth,\n      naturalHeight,\n    }\n  },\n})\n\nexport type VImg = InstanceType<typeof VImg>\n"],"mappings":"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"}

package/lib/components/VImg/index.d.ts

@@ -0,0 +1,89 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+
+interface srcObject {
+    src?: string;
+    srcset?: string;
+    lazySrc?: string;
+    aspect: number;
+}
+declare const VImg: vue.DefineComponent<{
+    transition: {
+        type: PropType<string | boolean | (vue.TransitionProps & {
+            component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+        })>;
+        default: string;
+        validator: (val: unknown) => boolean;
+    };
+    aspectRatio: (StringConstructor | NumberConstructor)[];
+    alt: StringConstructor;
+    cover: BooleanConstructor;
+    eager: BooleanConstructor;
+    gradient: StringConstructor;
+    lazySrc: StringConstructor;
+    options: {
+        type: PropType<IntersectionObserverInit>;
+        default: () => {
+            root: undefined;
+            rootMargin: undefined;
+            threshold: undefined;
+        };
+    };
+    sizes: StringConstructor;
+    src: {
+        type: PropType<string | srcObject>;
+        default: string;
+    };
+    srcset: StringConstructor;
+    width: (StringConstructor | NumberConstructor)[];
+}, {
+    currentSrc: vue.Ref<string>;
+    image: vue.Ref<HTMLImageElement | undefined>;
+    state: vue.Ref<"error" | "loaded" | "idle" | "loading">;
+    naturalWidth: vue.Ref<number | undefined>;
+    naturalHeight: vue.Ref<number | undefined>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("error" | "load" | "loadstart")[], "error" | "load" | "loadstart", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    transition: {
+        type: PropType<string | boolean | (vue.TransitionProps & {
+            component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+        })>;
+        default: string;
+        validator: (val: unknown) => boolean;
+    };
+    aspectRatio: (StringConstructor | NumberConstructor)[];
+    alt: StringConstructor;
+    cover: BooleanConstructor;
+    eager: BooleanConstructor;
+    gradient: StringConstructor;
+    lazySrc: StringConstructor;
+    options: {
+        type: PropType<IntersectionObserverInit>;
+        default: () => {
+            root: undefined;
+            rootMargin: undefined;
+            threshold: undefined;
+        };
+    };
+    sizes: StringConstructor;
+    src: {
+        type: PropType<string | srcObject>;
+        default: string;
+    };
+    srcset: StringConstructor;
+    width: (StringConstructor | NumberConstructor)[];
+}>> & {
+    onError?: ((...args: any[]) => any) | undefined;
+    onLoad?: ((...args: any[]) => any) | undefined;
+    onLoadstart?: ((...args: any[]) => any) | undefined;
+}, {
+    transition: string | boolean | (vue.TransitionProps & {
+        component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+    });
+    eager: boolean;
+    options: IntersectionObserverInit;
+    cover: boolean;
+    src: string | srcObject;
+}>;
+declare type VImg = InstanceType<typeof VImg>;
+
+export { VImg };

package/lib/components/VInput/VInput.mjs

@@ -90,18 +90,18 @@ export const VInput = genericComponent()({
       }, [hasPrepend && _createVNode("div", {
         "key": "prepend",
         "class": "v-input__prepend"
-      }, [props.prependIcon && _createVNode(InputIcon, {
+      }, [(_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots, slotProps.value), props.prependIcon && _createVNode(InputIcon, {
         "key": "prepend-icon",
         "name": "prepend"
-      }, null), (_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots, slotProps.value)]), slots.default && _createVNode("div", {
+      }, null)]), slots.default && _createVNode("div", {
         "class": "v-input__control"
       }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, slotProps.value)]), hasAppend && _createVNode("div", {
         "key": "append",
         "class": "v-input__append"
-      }, [(_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots, slotProps.value), props.appendIcon && _createVNode(InputIcon, {
+      }, [props.appendIcon && _createVNode(InputIcon, {
         "key": "append-icon",
         "name": "append"
-      }, null)]), hasDetails && _createVNode("div", {
+      }, null), (_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots, slotProps.value)]), hasDetails && _createVNode("div", {
         "class": "v-input__details"
       }, [_createVNode(VMessages, {
         "active": hasMessages,

package/lib/components/VInput/VInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VInput.mjs","names":["VMessages","IconValue","makeDensityProps","useDensity","makeValidationProps","useValidation","computed","EventProp","genericComponent","getUid","isOn","pick","propsFactory","useRender","useInputIcon","makeVInputProps","id","String","appendIcon","prependIcon","hideDetails","Boolean","messages","type","Array","default","direction","validator","v","includes","VInput","name","props","emits","val","setup","attrs","slots","emit","densityClasses","InputIcon","uid","errorMessages","isDirty","isDisabled","isReadonly","isPristine","isValid","isValidating","reset","resetValidation","validate","validationClasses","slotProps","hasPrepend","prepend","hasAppend","append","hasMessages","length","value","hasDetails","details","message","filterInputProps","keys","Object","filter","k"],"sources":["../../../src/components/VInput/VInput.tsx"],"sourcesContent":["// Styles\nimport './VInput.sass'\n\n// Components\nimport { VMessages } from '@/components/VMessages'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeValidationProps, useValidation } from '@/composables/validation'\n\n// Utilities\nimport { computed } from 'vue'\nimport { EventProp, genericComponent, getUid, isOn, pick, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { ComputedRef, PropType, Ref } from 'vue'\nimport type { MakeSlots } from '@/util'\nimport { useInputIcon } from '@/components/VInput/InputIcon'\n\nexport interface VInputSlot {\n  id: ComputedRef<string>\n  isDirty: ComputedRef<boolean>\n  isDisabled: ComputedRef<boolean>\n  isReadonly: ComputedRef<boolean>\n  isPristine: Ref<boolean>\n  isValid: ComputedRef<boolean | null>\n  isValidating: Ref<boolean>\n  reset: () => void\n  resetValidation: () => void\n  validate: () => void\n}\n\nexport const makeVInputProps = propsFactory({\n  id: String,\n  appendIcon: IconValue,\n  prependIcon: IconValue,\n  hideDetails: [Boolean, String] as PropType<boolean | 'auto'>,\n  messages: {\n    type: [Array, String] as PropType<string | string[]>,\n    default: () => ([]),\n  },\n  direction: {\n    type: String as PropType<'horizontal' | 'vertical'>,\n    default: 'horizontal',\n    validator: (v: any) => ['horizontal', 'vertical'].includes(v),\n  },\n\n  'onClick:prepend': EventProp,\n  'onClick:append': EventProp,\n\n  ...makeDensityProps(),\n  ...makeValidationProps(),\n})\n\nexport type VInputSlots = MakeSlots<{\n  default: [VInputSlot]\n  prepend: [VInputSlot]\n  append: [VInputSlot]\n  details: [VInputSlot]\n}>\n\nexport const VInput = genericComponent<new <T>() => {\n  $slots: VInputSlots\n}>()({\n  name: 'VInput',\n\n  props: {\n    ...makeVInputProps(),\n  },\n\n  emits: {\n    'update:modelValue': (val: any) => true,\n  },\n\n  setup (props, { attrs, slots, emit }) {\n    const { densityClasses } = useDensity(props)\n    const { InputIcon } = useInputIcon(props)\n\n    const uid = getUid()\n    const id = computed(() => props.id || `input-${uid}`)\n\n    const {\n      errorMessages,\n      isDirty,\n      isDisabled,\n      isReadonly,\n      isPristine,\n      isValid,\n      isValidating,\n      reset,\n      resetValidation,\n      validate,\n      validationClasses,\n    } = useValidation(props, 'v-input', id)\n\n    const slotProps = computed<VInputSlot>(() => ({\n      id,\n      isDirty,\n      isDisabled,\n      isReadonly,\n      isPristine,\n      isValid,\n      isValidating,\n      reset,\n      resetValidation,\n      validate,\n    }))\n\n    useRender(() => {\n      const hasPrepend = !!(slots.prepend || props.prependIcon)\n      const hasAppend = !!(slots.append || props.appendIcon)\n      const hasMessages = !!(\n        props.messages?.length ||\n        errorMessages.value.length\n      )\n      const hasDetails = !props.hideDetails || (\n        props.hideDetails === 'auto' &&\n        (hasMessages || !!slots.details)\n      )\n\n      return (\n        <div class={[\n          'v-input',\n          `v-input--${props.direction}`,\n          densityClasses.value,\n          validationClasses.value,\n        ]}\n        >\n          { hasPrepend && (\n            <div key=\"prepend\" class=\"v-input__prepend\">\n              { props.prependIcon && (\n                <InputIcon\n                  key=\"prepend-icon\"\n                  name=\"prepend\"\n                />\n              ) }\n\n              { slots.prepend?.(slotProps.value) }\n            </div>\n          ) }\n\n          { slots.default && (\n            <div class=\"v-input__control\">\n              { slots.default?.(slotProps.value) }\n            </div>\n          ) }\n\n          { hasAppend && (\n            <div key=\"append\" class=\"v-input__append\">\n              { slots.append?.(slotProps.value) }\n\n              { props.appendIcon && (\n                <InputIcon\n                  key=\"append-icon\"\n                  name=\"append\"\n                />\n              ) }\n            </div>\n          ) }\n\n          { hasDetails && (\n            <div class=\"v-input__details\">\n              <VMessages\n                active={ hasMessages }\n                messages={ errorMessages.value.length > 0\n                  ? errorMessages.value\n                  : props.messages\n                }\n                v-slots={{ message: slots.message }}\n              />\n\n              { slots.details?.(slotProps.value) }\n            </div>\n          ) }\n        </div>\n      )\n    })\n\n    return {\n      reset,\n      resetValidation,\n      validate,\n    }\n  },\n})\n\nexport type VInput = InstanceType<typeof VInput>\n\nexport function filterInputProps (props: Record<string, unknown>) {\n  const keys = Object.keys(VInput.props).filter(k => !isOn(k))\n  return pick(props, keys)\n}\n"],"mappings":"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"}
+{"version":3,"file":"VInput.mjs","names":["VMessages","IconValue","makeDensityProps","useDensity","makeValidationProps","useValidation","computed","EventProp","genericComponent","getUid","isOn","pick","propsFactory","useRender","useInputIcon","makeVInputProps","id","String","appendIcon","prependIcon","hideDetails","Boolean","messages","type","Array","default","direction","validator","v","includes","VInput","name","props","emits","val","setup","attrs","slots","emit","densityClasses","InputIcon","uid","errorMessages","isDirty","isDisabled","isReadonly","isPristine","isValid","isValidating","reset","resetValidation","validate","validationClasses","slotProps","hasPrepend","prepend","hasAppend","append","hasMessages","length","value","hasDetails","details","message","filterInputProps","keys","Object","filter","k"],"sources":["../../../src/components/VInput/VInput.tsx"],"sourcesContent":["// Styles\nimport './VInput.sass'\n\n// Components\nimport { VMessages } from '@/components/VMessages'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeValidationProps, useValidation } from '@/composables/validation'\n\n// Utilities\nimport { computed } from 'vue'\nimport { EventProp, genericComponent, getUid, isOn, pick, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { ComputedRef, PropType, Ref } from 'vue'\nimport type { MakeSlots } from '@/util'\nimport { useInputIcon } from '@/components/VInput/InputIcon'\n\nexport interface VInputSlot {\n  id: ComputedRef<string>\n  isDirty: ComputedRef<boolean>\n  isDisabled: ComputedRef<boolean>\n  isReadonly: ComputedRef<boolean>\n  isPristine: Ref<boolean>\n  isValid: ComputedRef<boolean | null>\n  isValidating: Ref<boolean>\n  reset: () => void\n  resetValidation: () => void\n  validate: () => void\n}\n\nexport const makeVInputProps = propsFactory({\n  id: String,\n  appendIcon: IconValue,\n  prependIcon: IconValue,\n  hideDetails: [Boolean, String] as PropType<boolean | 'auto'>,\n  messages: {\n    type: [Array, String] as PropType<string | string[]>,\n    default: () => ([]),\n  },\n  direction: {\n    type: String as PropType<'horizontal' | 'vertical'>,\n    default: 'horizontal',\n    validator: (v: any) => ['horizontal', 'vertical'].includes(v),\n  },\n\n  'onClick:prepend': EventProp,\n  'onClick:append': EventProp,\n\n  ...makeDensityProps(),\n  ...makeValidationProps(),\n})\n\nexport type VInputSlots = MakeSlots<{\n  default: [VInputSlot]\n  prepend: [VInputSlot]\n  append: [VInputSlot]\n  details: [VInputSlot]\n}>\n\nexport const VInput = genericComponent<new <T>() => {\n  $slots: VInputSlots\n}>()({\n  name: 'VInput',\n\n  props: {\n    ...makeVInputProps(),\n  },\n\n  emits: {\n    'update:modelValue': (val: any) => true,\n  },\n\n  setup (props, { attrs, slots, emit }) {\n    const { densityClasses } = useDensity(props)\n    const { InputIcon } = useInputIcon(props)\n\n    const uid = getUid()\n    const id = computed(() => props.id || `input-${uid}`)\n\n    const {\n      errorMessages,\n      isDirty,\n      isDisabled,\n      isReadonly,\n      isPristine,\n      isValid,\n      isValidating,\n      reset,\n      resetValidation,\n      validate,\n      validationClasses,\n    } = useValidation(props, 'v-input', id)\n\n    const slotProps = computed<VInputSlot>(() => ({\n      id,\n      isDirty,\n      isDisabled,\n      isReadonly,\n      isPristine,\n      isValid,\n      isValidating,\n      reset,\n      resetValidation,\n      validate,\n    }))\n\n    useRender(() => {\n      const hasPrepend = !!(slots.prepend || props.prependIcon)\n      const hasAppend = !!(slots.append || props.appendIcon)\n      const hasMessages = !!(\n        props.messages?.length ||\n        errorMessages.value.length\n      )\n      const hasDetails = !props.hideDetails || (\n        props.hideDetails === 'auto' &&\n        (hasMessages || !!slots.details)\n      )\n\n      return (\n        <div class={[\n          'v-input',\n          `v-input--${props.direction}`,\n          densityClasses.value,\n          validationClasses.value,\n        ]}\n        >\n          { hasPrepend && (\n            <div key=\"prepend\" class=\"v-input__prepend\">\n              { slots.prepend?.(slotProps.value) }\n\n              { props.prependIcon && (\n                <InputIcon\n                  key=\"prepend-icon\"\n                  name=\"prepend\"\n                />\n              ) }\n            </div>\n          ) }\n\n          { slots.default && (\n            <div class=\"v-input__control\">\n              { slots.default?.(slotProps.value) }\n            </div>\n          ) }\n\n          { hasAppend && (\n            <div key=\"append\" class=\"v-input__append\">\n              { props.appendIcon && (\n                <InputIcon\n                  key=\"append-icon\"\n                  name=\"append\"\n                />\n              ) }\n\n              { slots.append?.(slotProps.value) }\n            </div>\n          ) }\n\n          { hasDetails && (\n            <div class=\"v-input__details\">\n              <VMessages\n                active={ hasMessages }\n                messages={ errorMessages.value.length > 0\n                  ? errorMessages.value\n                  : props.messages\n                }\n                v-slots={{ message: slots.message }}\n              />\n\n              { slots.details?.(slotProps.value) }\n            </div>\n          ) }\n        </div>\n      )\n    })\n\n    return {\n      reset,\n      resetValidation,\n      validate,\n    }\n  },\n})\n\nexport type VInput = InstanceType<typeof VInput>\n\nexport function filterInputProps (props: Record<string, unknown>) {\n  const keys = Object.keys(VInput.props).filter(k => !isOn(k))\n  return pick(props, keys)\n}\n"],"mappings":"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"}

package/lib/components/VInput/index.d.ts

@@ -0,0 +1,325 @@
+import * as vue from 'vue';
+import { VNodeChild, PropType, JSXComponent, ComputedRef, Ref } from 'vue';
+
+declare type SlotsToProps<T extends Record<string, Slot>> = {
+    $children: () => (T['default'] | VNodeChild | {
+        [K in keyof T]?: T[K];
+    });
+    'v-slots': new () => {
+        [K in keyof T]?: T[K] | false;
+    };
+};
+declare type Slot<T extends any[] = any[]> = (...args: T) => VNodeChild;
+declare type MakeSlots<T extends Record<string, any[]>> = {
+    [K in keyof T]?: Slot<T[K]>;
+};
+
+declare type EventProp<T = (...args: any[]) => any> = T | T[];
+declare const EventProp: PropType<EventProp<(...args: any[]) => any>>;
+
+declare type ValidationResult = string | boolean;
+declare type ValidationRule = ValidationResult | PromiseLike<ValidationResult> | ((value: any) => ValidationResult) | ((value: any) => PromiseLike<ValidationResult>);
+
+declare type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
+
+interface VInputSlot {
+    id: ComputedRef<string>;
+    isDirty: ComputedRef<boolean>;
+    isDisabled: ComputedRef<boolean>;
+    isReadonly: ComputedRef<boolean>;
+    isPristine: Ref<boolean>;
+    isValid: ComputedRef<boolean | null>;
+    isValidating: Ref<boolean>;
+    reset: () => void;
+    resetValidation: () => void;
+    validate: () => void;
+}
+declare type VInputSlots = MakeSlots<{
+    default: [VInputSlot];
+    prepend: [VInputSlot];
+    append: [VInputSlot];
+    details: [VInputSlot];
+}>;
+declare const VInput: {
+    new (...args: any[]): {
+        $: vue.ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            error: boolean;
+            direction: "horizontal" | "vertical";
+            disabled: boolean;
+            readonly: boolean;
+            messages: string | string[];
+            density: "default" | "compact" | "comfortable" | null;
+            errorMessages: string | string[];
+            maxErrors: string | number;
+            rules: ValidationRule[];
+        }> & Omit<Readonly<vue.ExtractPropTypes<{
+            disabled: BooleanConstructor;
+            error: BooleanConstructor;
+            errorMessages: {
+                type: PropType<string | string[]>;
+                default: () => never[];
+            };
+            maxErrors: {
+                type: (StringConstructor | NumberConstructor)[];
+                default: number;
+            };
+            name: StringConstructor;
+            label: StringConstructor;
+            readonly: BooleanConstructor;
+            rules: {
+                type: PropType<ValidationRule[]>;
+                default: () => never[];
+            };
+            modelValue: null;
+            validationValue: null;
+            density: {
+                type: PropType<"default" | "compact" | "comfortable" | null>;
+                default: string;
+                validator: (v: any) => boolean;
+            };
+            id: StringConstructor;
+            appendIcon: PropType<IconValue>;
+            prependIcon: PropType<IconValue>;
+            hideDetails: PropType<boolean | "auto">;
+            messages: {
+                type: PropType<string | string[]>;
+                default: () => never[];
+            };
+            direction: {
+                type: PropType<"horizontal" | "vertical">;
+                default: string;
+                validator: (v: any) => boolean;
+            };
+            'onClick:prepend': PropType<EventProp<(...args: any[]) => any>>;
+            'onClick:append': PropType<EventProp<(...args: any[]) => any>>;
+        } & SlotsToProps<MakeSlots<{
+            default: [VInputSlot];
+            prepend: [VInputSlot];
+            append: [VInputSlot];
+            details: [VInputSlot];
+        }>>>> & {
+            "onUpdate:modelValue"?: ((val: any) => any) | undefined;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "error" | "direction" | "disabled" | "readonly" | "messages" | "density" | "errorMessages" | "maxErrors" | "rules">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: vue.Slot | undefined;
+        }>;
+        $root: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $emit: (event: "update:modelValue", val: any) => void;
+        $el: any;
+        $options: vue.ComponentOptionsBase<Readonly<vue.ExtractPropTypes<{
+            disabled: BooleanConstructor;
+            error: BooleanConstructor;
+            errorMessages: {
+                type: PropType<string | string[]>;
+                default: () => never[];
+            };
+            maxErrors: {
+                type: (StringConstructor | NumberConstructor)[];
+                default: number;
+            };
+            name: StringConstructor;
+            label: StringConstructor;
+            readonly: BooleanConstructor;
+            rules: {
+                type: PropType<ValidationRule[]>;
+                default: () => never[];
+            };
+            modelValue: null;
+            validationValue: null;
+            density: {
+                type: PropType<"default" | "compact" | "comfortable" | null>;
+                default: string;
+                validator: (v: any) => boolean;
+            };
+            id: StringConstructor;
+            appendIcon: PropType<IconValue>;
+            prependIcon: PropType<IconValue>;
+            hideDetails: PropType<boolean | "auto">;
+            messages: {
+                type: PropType<string | string[]>;
+                default: () => never[];
+            };
+            direction: {
+                type: PropType<"horizontal" | "vertical">;
+                default: string;
+                validator: (v: any) => boolean;
+            };
+            'onClick:prepend': PropType<EventProp<(...args: any[]) => any>>;
+            'onClick:append': PropType<EventProp<(...args: any[]) => any>>;
+        } & SlotsToProps<MakeSlots<{
+            default: [VInputSlot];
+            prepend: [VInputSlot];
+            append: [VInputSlot];
+            details: [VInputSlot];
+        }>>>> & {
+            "onUpdate:modelValue"?: ((val: any) => any) | undefined;
+        }, {
+            reset: () => void;
+            resetValidation: () => void;
+            validate: () => Promise<string[]>;
+        }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+            'update:modelValue': (val: any) => boolean;
+        }, string, {
+            error: boolean;
+            direction: "horizontal" | "vertical";
+            disabled: boolean;
+            readonly: boolean;
+            messages: string | string[];
+            density: "default" | "compact" | "comfortable" | null;
+            errorMessages: string | string[];
+            maxErrors: string | number;
+            rules: ValidationRule[];
+        }> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof vue.nextTick;
+        $watch(source: string | Function, cb: Function, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
+    } & Readonly<vue.ExtractPropTypes<{
+        disabled: BooleanConstructor;
+        error: BooleanConstructor;
+        errorMessages: {
+            type: PropType<string | string[]>;
+            default: () => never[];
+        };
+        maxErrors: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: number;
+        };
+        name: StringConstructor;
+        label: StringConstructor;
+        readonly: BooleanConstructor;
+        rules: {
+            type: PropType<ValidationRule[]>;
+            default: () => never[];
+        };
+        modelValue: null;
+        validationValue: null;
+        density: {
+            type: PropType<"default" | "compact" | "comfortable" | null>;
+            default: string;
+            validator: (v: any) => boolean;
+        };
+        id: StringConstructor;
+        appendIcon: PropType<IconValue>;
+        prependIcon: PropType<IconValue>;
+        hideDetails: PropType<boolean | "auto">;
+        messages: {
+            type: PropType<string | string[]>;
+            default: () => never[];
+        };
+        direction: {
+            type: PropType<"horizontal" | "vertical">;
+            default: string;
+            validator: (v: any) => boolean;
+        };
+        'onClick:prepend': PropType<EventProp<(...args: any[]) => any>>;
+        'onClick:append': PropType<EventProp<(...args: any[]) => any>>;
+    } & SlotsToProps<MakeSlots<{
+        default: [VInputSlot];
+        prepend: [VInputSlot];
+        append: [VInputSlot];
+        details: [VInputSlot];
+    }>>>> & {
+        "onUpdate:modelValue"?: ((val: any) => any) | undefined;
+    } & vue.ShallowUnwrapRef<{
+        reset: () => void;
+        resetValidation: () => void;
+        validate: () => Promise<string[]>;
+    }> & {} & vue.ComponentCustomProperties;
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & vue.ComponentOptionsBase<Readonly<vue.ExtractPropTypes<{
+    disabled: BooleanConstructor;
+    error: BooleanConstructor;
+    errorMessages: {
+        type: PropType<string | string[]>;
+        default: () => never[];
+    };
+    maxErrors: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    name: StringConstructor;
+    label: StringConstructor;
+    readonly: BooleanConstructor;
+    rules: {
+        type: PropType<ValidationRule[]>;
+        default: () => never[];
+    };
+    modelValue: null;
+    validationValue: null;
+    density: {
+        type: PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    id: StringConstructor;
+    appendIcon: PropType<IconValue>;
+    prependIcon: PropType<IconValue>;
+    hideDetails: PropType<boolean | "auto">;
+    messages: {
+        type: PropType<string | string[]>;
+        default: () => never[];
+    };
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    'onClick:prepend': PropType<EventProp<(...args: any[]) => any>>;
+    'onClick:append': PropType<EventProp<(...args: any[]) => any>>;
+} & SlotsToProps<MakeSlots<{
+    default: [VInputSlot];
+    prepend: [VInputSlot];
+    append: [VInputSlot];
+    details: [VInputSlot];
+}>>>> & {
+    "onUpdate:modelValue"?: ((val: any) => any) | undefined;
+}, {
+    reset: () => void;
+    resetValidation: () => void;
+    validate: () => Promise<string[]>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'update:modelValue': (val: any) => boolean;
+}, string, {
+    error: boolean;
+    direction: "horizontal" | "vertical";
+    disabled: boolean;
+    readonly: boolean;
+    messages: string | string[];
+    density: "default" | "compact" | "comfortable" | null;
+    errorMessages: string | string[];
+    maxErrors: string | number;
+    rules: ValidationRule[];
+}> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T>() => {
+    $slots: VInputSlots;
+});
+declare type VInput = InstanceType<typeof VInput>;
+
+export { VInput };