origam 0.2.0 → 0.3.2

package/dist/src/components/Icon/OrigamSvgIcon.vue

@@ -0,0 +1,95 @@
+<template>
+	<component
+			:is="tag"
+			:class="iconClasses"
+			:style="iconStyles"
+	>
+		<svg
+				aria-hidden="true"
+				class="origam-icon__svg"
+				role="img"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+		>
+			<template v-if="!isArray(icon)">
+				<path :d="icon as string"></path>
+			</template>
+			<template v-else>
+				<template
+						v-for="(path, index) in icon"
+						:key="index"
+				>
+					<template v-if="!isArray(path)">
+						<path
+								:d="path[0] as string"
+								:fill-opacity="path[1]"
+						></path>
+					</template>
+					<template v-else>
+						<path :d="path as string"></path>
+					</template>
+				</template>
+			</template>
+		</svg>
+	</component>
+</template>
+
+<script setup>
+import { useProps } from "@/composables";
+import { computed, StyleValue } from "vue";
+const props = defineProps({
+  disabled: { type: Boolean, required: false },
+  icon: { type: null, required: false },
+  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  tag: { type: String, required: false, default: "div" },
+  size: { type: null, required: false },
+  padding: { type: [Boolean, Number, String], required: false },
+  paddingTop: { type: [Boolean, Number, String], required: false },
+  paddingLeft: { type: [Boolean, Number, String], required: false },
+  paddingBottom: { type: [Boolean, Number, String], required: false },
+  paddingRight: { type: [Boolean, Number, String], required: false },
+  paddingBlock: { type: [Boolean, Number, String], required: false },
+  paddingInline: { type: [Boolean, Number, String], required: false },
+  margin: { type: [Boolean, Number, String], required: false },
+  marginTop: { type: [Boolean, Number, String], required: false },
+  marginLeft: { type: [Boolean, Number, String], required: false },
+  marginBottom: { type: [Boolean, Number, String], required: false },
+  marginRight: { type: [Boolean, Number, String], required: false },
+  marginBlock: { type: [Boolean, Number, String], required: false },
+  marginInline: { type: [Boolean, Number, String], required: false },
+  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
+  borderTop: { type: [Boolean, Number, String], required: false },
+  borderLeft: { type: [Boolean, Number, String], required: false },
+  borderBottom: { type: [Boolean, Number, String], required: false },
+  borderRight: { type: [Boolean, Number, String], required: false },
+  borderBlock: { type: [Boolean, Number, String], required: false },
+  borderInline: { type: [Boolean, Number, String], required: false },
+  borderColor: { type: String, required: false },
+  borderStyle: { type: String, required: false }
+});
+const { filterProps } = useProps(props);
+const isArray = (data) => {
+  return Array.isArray(data);
+};
+const iconStyles = computed(() => {
+  return [
+    props.style
+  ];
+});
+const iconClasses = computed(() => {
+  return [
+    props.class
+  ];
+});
+defineExpose({
+  filterProps
+});
+</script>

package/dist/src/components/Icon/index.cjs

@@ -3,39 +3,39 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "FoxyClassIcon", {
+Object.defineProperty(exports, "OrigamClassIcon", {
   enumerable: true,
   get: function () {
-    return _FoxyClassIcon.default;
+    return _OrigamClassIcon.default;
   }
 });
-Object.defineProperty(exports, "FoxyComponentIcon", {
+Object.defineProperty(exports, "OrigamComponentIcon", {
   enumerable: true,
   get: function () {
-    return _FoxyComponentIcon.default;
+    return _OrigamComponentIcon.default;
   }
 });
-Object.defineProperty(exports, "FoxyIcon", {
+Object.defineProperty(exports, "OrigamIcon", {
   enumerable: true,
   get: function () {
-    return _FoxyIcon.default;
+    return _OrigamIcon.default;
   }
 });
-Object.defineProperty(exports, "FoxyLigatureIcon", {
+Object.defineProperty(exports, "OrigamLigatureIcon", {
   enumerable: true,
   get: function () {
-    return _FoxyLigatureIcon.default;
+    return _OrigamLigatureIcon.default;
   }
 });
-Object.defineProperty(exports, "FoxySvgIcon", {
+Object.defineProperty(exports, "OrigamSvgIcon", {
   enumerable: true,
   get: function () {
-    return _FoxySvgIcon.default;
+    return _OrigamSvgIcon.default;
   }
 });
-var _FoxyIcon = _interopRequireDefault(require("./FoxyIcon.vue"));
-var _FoxyClassIcon = _interopRequireDefault(require("./FoxyClassIcon.vue"));
-var _FoxyComponentIcon = _interopRequireDefault(require("./FoxyComponentIcon.vue"));
-var _FoxyLigatureIcon = _interopRequireDefault(require("./FoxyLigatureIcon.vue"));
-var _FoxySvgIcon = _interopRequireDefault(require("./FoxySvgIcon.vue"));
+var _OrigamIcon = _interopRequireDefault(require("./OrigamIcon.vue"));
+var _OrigamClassIcon = _interopRequireDefault(require("./OrigamClassIcon.vue"));
+var _OrigamComponentIcon = _interopRequireDefault(require("./OrigamComponentIcon.vue"));
+var _OrigamLigatureIcon = _interopRequireDefault(require("./OrigamLigatureIcon.vue"));
+var _OrigamSvgIcon = _interopRequireDefault(require("./OrigamSvgIcon.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/Icon/index.d.ts

@@ -1,5 +1,5 @@
-export { default as FoxyIcon } from './FoxyIcon.vue';
-export { default as FoxyClassIcon } from './FoxyClassIcon.vue';
-export { default as FoxyComponentIcon } from './FoxyComponentIcon.vue';
-export { default as FoxyLigatureIcon } from './FoxyLigatureIcon.vue';
-export { default as FoxySvgIcon } from './FoxySvgIcon.vue';
+export { default as OrigamIcon } from './OrigamIcon.vue';
+export { default as OrigamClassIcon } from './OrigamClassIcon.vue';
+export { default as OrigamComponentIcon } from './OrigamComponentIcon.vue';
+export { default as OrigamLigatureIcon } from './OrigamLigatureIcon.vue';
+export { default as OrigamSvgIcon } from './OrigamSvgIcon.vue';

package/dist/src/components/Icon/index.js

@@ -1,5 +1,5 @@
-export { default as FoxyIcon } from "./FoxyIcon.vue";
-export { default as FoxyClassIcon } from "./FoxyClassIcon.vue";
-export { default as FoxyComponentIcon } from "./FoxyComponentIcon.vue";
-export { default as FoxyLigatureIcon } from "./FoxyLigatureIcon.vue";
-export { default as FoxySvgIcon } from "./FoxySvgIcon.vue";
+export { default as OrigamIcon } from "./OrigamIcon.vue";
+export { default as OrigamClassIcon } from "./OrigamClassIcon.vue";
+export { default as OrigamComponentIcon } from "./OrigamComponentIcon.vue";
+export { default as OrigamLigatureIcon } from "./OrigamLigatureIcon.vue";
+export { default as OrigamSvgIcon } from "./OrigamSvgIcon.vue";

package/dist/src/components/Img/OrigamImg.cy.cjs

@@ -0,0 +1,10 @@
+"use strict";
+
+var _vue = require("vue");
+var _OrigamImg = _interopRequireDefault(require("./OrigamImg.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+describe("<OrigamImg />", () => {
+  it("renders", () => {
+    cy.mount((0, _vue.h)(_OrigamImg.default), {});
+  });
+});

package/dist/src/components/Img/OrigamImg.cy.js

@@ -0,0 +1,7 @@
+import { h } from "vue";
+import OrigamImg from "./OrigamImg.vue";
+describe("<OrigamImg />", () => {
+  it("renders", () => {
+    cy.mount(h(OrigamImg), {});
+  });
+});

package/dist/src/components/Img/OrigamImg.vue

@@ -0,0 +1,466 @@
+<template>
+	<origam-responsive
+			v-intersect="intersect"
+			:aria-label="props.alt"
+			:aspect-ratio="aspectRatio"
+			:class="imgClasses"
+			:role="props.alt ? 'img' : undefined"
+			:style="imgStyles"
+			v-bind="responsiveProps"
+	>
+		<template #additional>
+			<origam-transition
+					:transition="transition"
+					appear
+			>
+				<img
+						v-show="isLoaded"
+						ref="image"
+						:alt="alt"
+						:class="imgPictureClasses"
+						:crossorigin="crossorigin"
+						:draggable="draggable"
+						:referrerpolicy="referrerpolicy"
+						:sizes="sizes"
+						:src="normalisedSrc.src"
+						:srcset="normalisedSrc.srcset"
+						:style="imgContentStyles"
+						@error="handleError"
+						@load="handleLoad"
+				/>
+			</origam-transition>
+			<origam-transition :transition="transition">
+				<img
+						v-if="normalisedSrc.lazySrc && !isLoaded"
+						:alt="alt"
+						:class="imgPictureClasses"
+						:crossorigin="crossorigin"
+						:draggable="draggable"
+						:referrerpolicy="referrerpolicy"
+						:src="normalisedSrc.lazySrc"
+						:style="imgContentStyles"
+				/>
+			</origam-transition>
+			<origam-transition
+					:transition="transition"
+					appear
+			>
+				<div
+						v-if="(isLoading || (isError && !slots.error)) && slots.placeholder"
+						class="origam-img__placeholder"
+				>
+					<slot name="placeholder"/>
+				</div>
+			</origam-transition>
+			<origam-transition
+					:transition="transition"
+					appear
+			>
+				<div
+						v-if="isError && slots.error"
+						class="origam-img__error"
+				>
+					<slot name="error"/>
+				</div>
+			</origam-transition>
+			<div
+					v-if="gradient"
+					:style="imgGradientStyles"
+					class="origam-img__gradient"
+			/>
+		</template>
+
+		<template
+				v-if="hasContent"
+				#default
+		>
+			<slot name="default"/>
+		</template>
+	</origam-responsive>
+</template>
+
+<script setup>
+import { OrigamResponsive, OrigamTransition } from "@/components";
+import { useBorder, useBothColor, useMargin, usePadding, useProps, useRounded } from "@/composables";
+import { SUPPORTS_INTERSECTION } from "@/consts";
+import { vIntersect } from "@/directives";
+import { IMG_STATE } from "@/enums";
+import { convertToUnit, getCurrentInstance, pick } from "@/utils";
+import {
+  computed,
+  nextTick,
+  onBeforeMount,
+  onBeforeUnmount,
+  ref,
+  shallowRef,
+  StyleValue,
+  toRef,
+  useSlots,
+  watch
+} from "vue";
+const props = defineProps({
+  alt: { type: String, required: false },
+  cover: { type: Boolean, required: false },
+  draggable: { type: Boolean, required: false },
+  gradient: { type: String, required: false },
+  lazySrc: { type: String, required: false },
+  options: { type: Object, required: false },
+  sizes: { type: String, required: false },
+  src: { type: [String, Object], required: false },
+  crossorigin: { type: null, required: false },
+  referrerpolicy: { type: null, required: false },
+  srcset: { type: String, required: false },
+  position: { type: String, required: false },
+  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  aspectRatio: { type: [String, Number], required: false },
+  contentClass: { type: String, required: false },
+  inline: { type: Boolean, required: false },
+  height: { type: [Number, String], required: false },
+  maxHeight: { type: [Number, String], required: false },
+  maxWidth: { type: [Number, String], required: false },
+  minHeight: { type: [Number, String], required: false },
+  minWidth: { type: [Number, String], required: false },
+  width: { type: [Number, String], required: false },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  padding: { type: [Boolean, Number, String], required: false },
+  paddingTop: { type: [Boolean, Number, String], required: false },
+  paddingLeft: { type: [Boolean, Number, String], required: false },
+  paddingBottom: { type: [Boolean, Number, String], required: false },
+  paddingRight: { type: [Boolean, Number, String], required: false },
+  paddingBlock: { type: [Boolean, Number, String], required: false },
+  paddingInline: { type: [Boolean, Number, String], required: false },
+  margin: { type: [Boolean, Number, String], required: false },
+  marginTop: { type: [Boolean, Number, String], required: false },
+  marginLeft: { type: [Boolean, Number, String], required: false },
+  marginBottom: { type: [Boolean, Number, String], required: false },
+  marginRight: { type: [Boolean, Number, String], required: false },
+  marginBlock: { type: [Boolean, Number, String], required: false },
+  marginInline: { type: [Boolean, Number, String], required: false },
+  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
+  borderTop: { type: [Boolean, Number, String], required: false },
+  borderLeft: { type: [Boolean, Number, String], required: false },
+  borderBottom: { type: [Boolean, Number, String], required: false },
+  borderRight: { type: [Boolean, Number, String], required: false },
+  borderBlock: { type: [Boolean, Number, String], required: false },
+  borderInline: { type: [Boolean, Number, String], required: false },
+  borderColor: { type: String, required: false },
+  borderStyle: { type: String, required: false },
+  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  transition: { type: [Boolean, String, Object], required: false },
+  disabled: { type: Boolean, required: false },
+  eager: { type: Boolean, required: false }
+});
+const emits = defineEmits(["loadstart", "load", "error"]);
+const { filterProps } = useProps(props);
+const { colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { borderClasses, borderStyles } = useBorder(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const slots = useSlots();
+const vm = getCurrentInstance("OrigamImg");
+const currentSrc = shallowRef("");
+const image = ref();
+const state = shallowRef(props.eager ? IMG_STATE.LOADING : IMG_STATE.IDLE);
+const naturalWidth = shallowRef();
+const naturalHeight = shallowRef();
+const normalisedSrc = computed(() => {
+  return props.src && typeof props.src === "object" ? {
+    src: props.src.src,
+    srcset: props.srcset || props.src.srcset,
+    lazySrc: props.lazySrc || props.src.lazySrc,
+    aspectRatio: Number(props.aspectRatio || props.src.aspectRatio || 0)
+  } : {
+    src: props.src,
+    srcset: props.srcset,
+    lazySrc: props.lazySrc,
+    aspectRatio: Number(props.aspectRatio || 0)
+  };
+});
+const aspectRatio = computed(() => {
+  return normalisedSrc.value.aspectRatio || naturalWidth.value / naturalHeight.value || 0;
+});
+const responsiveProps = pick(props, ["aspectRatio", "contentClass", "inline", "height", "maxHeight", "maxWidth", "minHeight", "minWidth", "width", "class", "style"]);
+watch(() => props.src, () => {
+  init(state.value !== IMG_STATE.IDLE);
+});
+watch(aspectRatio, (val, oldVal) => {
+  if (!val && oldVal && image.value) {
+    pollForSize(image.value);
+  }
+});
+onBeforeMount(() => init());
+const init = (isIntersecting) => {
+  if (props.eager && isIntersecting) return;
+  if (SUPPORTS_INTERSECTION && !isIntersecting && !props.eager) return;
+  state.value = IMG_STATE.LOADING;
+  if (normalisedSrc.value.lazySrc) {
+    const lazyImg = new Image();
+    lazyImg.src = normalisedSrc.value.lazySrc;
+    pollForSize(lazyImg, null);
+  }
+  if (!normalisedSrc.value.src) return;
+  nextTick(() => {
+    emits("loadstart", image.value?.currentSrc || normalisedSrc.value.src);
+    setTimeout(() => {
+      if (vm.isUnmounted) return;
+      if (image.value?.complete) {
+        if (!image.value.naturalWidth) {
+          onError();
+        }
+        if (state.value === IMG_STATE.ERROR) return;
+        if (!aspectRatio.value) pollForSize(image.value, null);
+        if (state.value === IMG_STATE.LOADING) onLoad();
+      } else {
+        if (!aspectRatio.value) pollForSize(image.value);
+        getSrc();
+      }
+    });
+  });
+};
+const onLoad = () => {
+  if (vm.isUnmounted) return;
+  getSrc();
+  pollForSize(image.value);
+  state.value = "loaded";
+  emits("load", image.value?.currentSrc || normalisedSrc.value.src);
+};
+const handleLoad = () => {
+  onLoad();
+};
+const onError = () => {
+  if (vm.isUnmounted) return;
+  state.value = "error";
+  emits("error", image.value?.currentSrc || normalisedSrc.value.src);
+};
+const handleError = () => {
+  onError();
+};
+const getSrc = () => {
+  const img = image.value;
+  if (img) currentSrc.value = img.currentSrc || img.src;
+};
+let timer = -1;
+onBeforeUnmount(() => {
+  clearTimeout(timer);
+});
+const pollForSize = (img, timeout = 100) => {
+  const poll = () => {
+    clearTimeout(timer);
+    if (vm.isUnmounted) return;
+    const { naturalHeight: imgHeight, naturalWidth: imgWidth } = img;
+    if (imgHeight || imgWidth) {
+      naturalWidth.value = imgWidth;
+      naturalHeight.value = imgHeight;
+    } else if (!img.complete && state.value === IMG_STATE.LOADING && timeout != null) {
+      timer = window.setTimeout(poll, timeout);
+    } else if (img.currentSrc.endsWith(".svg") || img.currentSrc.startsWith("data:image/svg+xml")) {
+      naturalWidth.value = 1;
+      naturalHeight.value = 1;
+    }
+  };
+  poll();
+};
+const isBooted = shallowRef(false);
+const stop = watch(aspectRatio, (val) => {
+  if (val) {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        isBooted.value = true;
+      });
+    });
+    stop();
+  }
+});
+const intersect = ref([{
+  handler: init,
+  options: props.options
+}, null, ["once"]]);
+const isLoaded = computed(() => {
+  return state.value === IMG_STATE.LOADED;
+});
+const isLoading = computed(() => {
+  return state.value === IMG_STATE.LOADING;
+});
+const isError = computed(() => {
+  return state.value === IMG_STATE.ERROR && !slots.error;
+});
+const hasContent = computed(() => {
+  return slots.default;
+});
+const imgStyles = computed(() => {
+  return [
+    { "width": convertToUnit(props.width === "auto" ? naturalWidth.value : props.width) },
+    colorStyles.value,
+    roundedStyles.value,
+    borderStyles.value,
+    paddingStyles.value,
+    marginStyles.value,
+    props.style
+  ];
+});
+const imgClasses = computed(() => {
+  return [
+    "origam-img",
+    { "origam-img--booting": !isBooted.value },
+    roundedClasses.value,
+    borderClasses.value,
+    paddingClasses.value,
+    marginClasses.value,
+    props.class
+  ];
+});
+const imgPictureClasses = computed(() => {
+  return [
+    "origam-img__picture",
+    {
+      "origam-img__picture--cover": props.cover,
+      "origam-img__picture--contain": !props.cover,
+      "origam-img__picture--preload": normalisedSrc.value.lazySrc && !isLoaded.value
+    }
+  ];
+});
+const imgContentStyles = computed(() => {
+  return [
+    { objectPosition: props.position }
+  ];
+});
+const imgGradientStyles = computed(() => {
+  return [
+    `backgroundImage: linear-gradient(${props.gradient})`
+  ];
+});
+defineExpose({
+  filterProps
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-img {
+		$this: &;
+
+		z-index: var(--origam-img---z-index);
+
+		&--booting {
+			&:deep(.origam-responsive__sizer) {
+				transition: var(--origam-img--booting---transition);
+			}
+		}
+
+		&--rounded {
+			border-radius: var(--origam-img--rounded---border-radius);
+		}
+
+		&__picture {
+			z-index: var(--origam-img__picture---z-index);
+			position: var(--origam-img__picture---position);
+			top: var(--origam-img__picture---top);
+			left: var(--origam-img__picture---left);
+			width: var(--origam-img__picture---width);
+			height: var(--origam-img__picture---height);
+
+			&--preload {
+				filter: var(--origam-img__picture--preload---filter);
+			}
+
+			&--contain {
+				object-fit: var(--origam-img__picture--contain---object-fit);
+			}
+
+			&--cover {
+				object-fit: var(--origam-img__picture--cover---object-fit);
+			}
+		}
+
+		&__gradient {
+			z-index: var(--origam-img__gradient---z-index);
+			position: var(--origam-img__gradient---position);
+			top: var(--origam-img__gradient---top);
+			left: var(--origam-img__gradient---left);
+			width: var(--origam-img__gradient---width);
+			height: var(--origam-img__gradient---height);
+			background-repeat: var(--origam-img__gradient---background-repeat);
+		}
+
+		&__placeholder {
+			z-index: var(--origam-img__placeholder---z-index);
+			position: var(--origam-img__placeholder---position);
+			top: var(--origam-img__placeholder---top);
+			left: var(--origam-img__placeholder---left);
+			width: var(--origam-img__placeholder---width);
+			height: var(--origam-img__placeholder---height);
+		}
+
+		&__error {
+			z-index: var(--origam-img__error---z-index);
+			position: var(--origam-img__error---position);
+			top: var(--origam-img__error---top);
+			left: var(--origam-img__error---left);
+			width: var(--origam-img__error---width);
+			height: var(--origam-img__error---height);
+		}
+	}
+</style>
+
+<style>
+	:root {
+		--origam-img---z-index: 0;
+
+		--origam-img--booting---transition: none;
+
+		--origam-img--rounded---border-radius: 4px;
+
+		--origam-img__content---z-index: -1;
+		--origam-img__content---position: absolute;
+		--origam-img__content---top: 0;
+		--origam-img__content---left: 0;
+		--origam-img__content---width: 100%;
+		--origam-img__content---height: 100%;
+
+		--origam-img__picture---z-index: -1;
+		--origam-img__picture---position: absolute;
+		--origam-img__picture---top: 0;
+		--origam-img__picture---left: 0;
+		--origam-img__picture---width: 100%;
+		--origam-img__picture---height: 100%;
+
+		--origam-img__picture--preload---filter: blur(4px);
+
+		--origam-img__picture--contain---object-fit: contain;
+
+		--origam-img__picture--cover---object-fit: cover;
+
+		--origam-img__gradient---z-index: -1;
+		--origam-img__gradient---position: absolute;
+		--origam-img__gradient---top: 0;
+		--origam-img__gradient---left: 0;
+		--origam-img__gradient---width: 100%;
+		--origam-img__gradient---height: 100%;
+		--origam-img__gradient---background-repeat: no-repeat;
+
+		--origam-img__placeholder---z-index: -1;
+		--origam-img__placeholder---position: absolute;
+		--origam-img__placeholder---top: 0;
+		--origam-img__placeholder---left: 0;
+		--origam-img__placeholder---width: 100%;
+		--origam-img__placeholder---height: 100%;
+
+		--origam-img__error---z-index: -1;
+		--origam-img__error---position: absolute;
+		--origam-img__error---top: 0;
+		--origam-img__error---left: 0;
+		--origam-img__error---width: 100%;
+		--origam-img__error---height: 100%;
+	}
+</style>

package/dist/src/components/Img/index.cjs

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "FoxyImg", {
+Object.defineProperty(exports, "OrigamImg", {
   enumerable: true,
   get: function () {
-    return _FoxyImg.default;
+    return _OrigamImg.default;
   }
 });
-var _FoxyImg = _interopRequireDefault(require("./FoxyImg.vue"));
+var _OrigamImg = _interopRequireDefault(require("./OrigamImg.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/Img/index.d.ts

@@ -1 +1 @@
-export { default as FoxyImg } from './FoxyImg.vue';
+export { default as OrigamImg } from './OrigamImg.vue';

package/dist/src/components/Img/index.js

@@ -1 +1 @@
-export { default as FoxyImg } from "./FoxyImg.vue";
+export { default as OrigamImg } from "./OrigamImg.vue";