origam 0.1.0 → 0.3.0

package/dist/src/components/InfiniteScroll/OrigamInfiniteScroll.cy.cjs

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

package/dist/src/components/InfiniteScroll/OrigamInfiniteScroll.cy.js

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

package/dist/src/components/InfiniteScroll/OrigamInfiniteScroll.vue

@@ -0,0 +1,277 @@
+<template>
+	<component
+			:is="tag"
+			ref="rootEl"
+			:class="infiniteScrollClasses"
+			:style="infiniteScrollStyles"
+	>
+		<div class="origam-infinite-scroll__side">
+			<template v-if="hasStartIntersect">
+				<slot
+						name="error"
+						v-bind="{side: INFINITE_SCROLL_SIDE.START, props: { onClick: () => intersecting(INFINITE_SCROLL_SIDE.START), color }}"
+				/>
+
+				<slot
+						name="empty"
+						v-bind="{side: INFINITE_SCROLL_SIDE.START, props: { onClick: () => intersecting(INFINITE_SCROLL_SIDE.START), color }}"
+				>
+					<span>No more</span>
+				</slot>
+
+				<template v-if="isManualMode">
+					<template v-if="isLoading">
+						<slot
+								name="loading"
+								v-bind="{side: INFINITE_SCROLL_SIDE.START, props: { onClick: () => intersecting(INFINITE_SCROLL_SIDE.START), color }}"
+						>
+							<origam-progress
+									:color="color"
+									:type="PROGRESS_TYPE.CIRCULAR"
+									indeterminate
+							/>
+						</slot>
+					</template>
+
+					<slot
+							name="loadMore"
+							v-bind="{side: INFINITE_SCROLL_SIDE.START, props: { onClick: () => intersecting(INFINITE_SCROLL_SIDE.START), color }}"
+					>
+						<origam-btn
+								:color="color"
+								text="Load more"
+								@click="intersecting(INFINITE_SCROLL_SIDE.START)"
+						/>
+					</slot>
+				</template>
+			</template>
+		</div>
+
+		<template v-if="rootEl && hasStartIntersect && isIntersectMode">
+			<origam-infinite-scroll-intersect
+					:key="INFINITE_SCROLL_SIDE.START"
+					:margin="margin"
+					:root-ref="rootEl"
+					:side="INFINITE_SCROLL_SIDE.START"
+					@intersect="handleIntersect"
+			/>
+		</template>
+
+		<slot name="default"/>
+
+		<template v-if="rootEl && hasEndIntersect && isIntersectMode">
+			<origam-infinite-scroll-intersect
+					:key="INFINITE_SCROLL_SIDE.END"
+					:margin="margin"
+					:root-ref="rootEl"
+					:side="INFINITE_SCROLL_SIDE.END"
+					@intersect="handleIntersect"
+			/>
+		</template>
+
+		<div class="origam-infinite-scroll__side">
+			<template v-if="hasStartIntersect">
+				<slot
+						name="error"
+						v-bind="{side: INFINITE_SCROLL_SIDE.END, props: { onClick: () => intersecting(INFINITE_SCROLL_SIDE.END), color }}"
+				/>
+
+				<slot
+						name="empty"
+						v-bind="{side: INFINITE_SCROLL_SIDE.END, props: { onClick: () => intersecting(INFINITE_SCROLL_SIDE.END), color }}"
+				>
+					<span>{{ t(emptyText) }}</span>
+				</slot>
+
+				<template v-if="isManualMode">
+					<template v-if="isLoading">
+						<slot
+								name="loading"
+								v-bind="{side: INFINITE_SCROLL_SIDE.END, props: { onClick: () => intersecting(INFINITE_SCROLL_SIDE.END), color }}"
+						>
+							<origam-progress
+									:color="color"
+									:type="PROGRESS_TYPE.CIRCULAR"
+									indeterminate
+							/>
+						</slot>
+					</template>
+
+					<slot
+							name="loadMore"
+							v-bind="{side: INFINITE_SCROLL_SIDE.END, props: { onClick: () => intersecting(INFINITE_SCROLL_SIDE.END), color }}"
+					>
+						<origam-btn
+								:color="color"
+								:text="t(loadMoreText)"
+								@click="intersecting(INFINITE_SCROLL_SIDE.END)"
+						/>
+					</slot>
+				</template>
+			</template>
+		</div>
+	</component>
+</template>
+
+<script setup>
+import { OrigamBtn, OrigamInfiniteScrollIntersect, OrigamProgress } from "@origam/components";
+import { useBothColor, useDimension, useLocale, useProps } from "@origam/composables";
+import {
+  DIRECTION,
+  INFINITE_SCROLL_MODE,
+  INFINITE_SCROLL_SIDE,
+  INFINITE_SCROLL_STATUS,
+  PROGRESS_TYPE
+} from "@origam/enums";
+import { computed, nextTick, onMounted, ref, shallowRef, StyleValue, toRef } from "vue";
+const props = defineProps({
+  side: { type: null, required: false, default: INFINITE_SCROLL_SIDE.END },
+  mode: { type: null, required: false, default: INFINITE_SCROLL_MODE.INTERSECT },
+  loadMoreText: { type: String, required: false, default: "origam.infiniteScroll.loadMore" },
+  emptyText: { type: String, required: false, default: "origam.infiniteScroll.empty" },
+  margin: { type: 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 },
+  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 },
+  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 },
+  tag: { type: String, required: false, default: "div" },
+  direction: { type: null, required: false, default: DIRECTION.VERTICAL }
+});
+const emits = defineEmits(["load"]);
+const { filterProps } = useProps(props);
+const { t } = useLocale();
+const { dimensionStyles } = useDimension(props);
+const { colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const rootEl = ref();
+const isIntersecting = shallowRef(false);
+const propertyDirection = computed(() => {
+  return props.direction === DIRECTION.VERTICAL ? "scrollTop" : "scrollLeft";
+});
+const propertySize = computed(() => {
+  return props.direction === DIRECTION.VERTICAL ? "scrollHeight" : "scrollWidth";
+});
+const propertyContainerSize = computed(() => {
+  return props.direction === DIRECTION.VERTICAL ? "clientHeight" : "clientWidth";
+});
+const getScrollAmount = () => {
+  if (!rootEl.value) return 0;
+  return rootEl.value[propertyDirection.value];
+};
+const setScrollAmount = (amount) => {
+  if (!rootEl.value) return;
+  rootEl.value[propertyDirection.value] = amount;
+};
+const getScrollSize = () => {
+  if (!rootEl.value) return 0;
+  return rootEl.value[propertySize.value];
+};
+const getContainerSize = () => {
+  if (!rootEl.value) return 0;
+  return rootEl.value[propertyContainerSize.value];
+};
+onMounted(() => {
+  if (!rootEl.value) return;
+  if (props.side === INFINITE_SCROLL_SIDE.START) {
+    setScrollAmount(getScrollSize());
+  } else if (props.side === INFINITE_SCROLL_SIDE.BOTH) {
+    setScrollAmount(getScrollSize() / 2 - getContainerSize() / 2);
+  }
+});
+const currentSide = shallowRef(INFINITE_SCROLL_SIDE.START);
+const startStatus = shallowRef(INFINITE_SCROLL_STATUS.OK);
+const endStatus = shallowRef(INFINITE_SCROLL_STATUS.OK);
+const status = computed({
+  get() {
+    return currentSide.value === INFINITE_SCROLL_SIDE.START ? startStatus.value : endStatus.value;
+  },
+  set(status2) {
+    if (currentSide.value === INFINITE_SCROLL_SIDE.START) {
+      startStatus.value = status2;
+    } else if (currentSide.value === INFINITE_SCROLL_SIDE.END) {
+      endStatus.value = status2;
+    }
+  }
+});
+let previousScrollSize = 0;
+const handleIntersect = (side, _isIntersecting) => {
+  isIntersecting.value = _isIntersecting;
+  if (isIntersecting.value) {
+    intersecting(side);
+  }
+};
+const done = (_status) => {
+  status.value = _status;
+  nextTick(() => {
+    if (status.value === INFINITE_SCROLL_STATUS.EMPTY || status.value === INFINITE_SCROLL_STATUS.ERROR) return;
+    if (status.value === INFINITE_SCROLL_STATUS.OK && currentSide.value === INFINITE_SCROLL_SIDE.START) {
+      setScrollAmount(getScrollSize() - previousScrollSize + getScrollAmount());
+    }
+    if (props.mode !== INFINITE_SCROLL_MODE.MANUAL) {
+      nextTick(() => {
+        window.requestAnimationFrame(() => {
+          window.requestAnimationFrame(() => {
+            window.requestAnimationFrame(() => {
+              intersecting(currentSide.value);
+            });
+          });
+        });
+      });
+    }
+  });
+};
+const intersecting = (side) => {
+  if (props.mode !== "manual" && !isIntersecting.value) return;
+  currentSide.value = side;
+  if (!rootEl.value || isLoading.value) return;
+  previousScrollSize = getScrollSize();
+  status.value = INFINITE_SCROLL_STATUS.LOADING;
+  emits("load", { side: currentSide.value, done });
+};
+const hasStartIntersect = computed(() => {
+  return props.side === INFINITE_SCROLL_SIDE.START || props.side === INFINITE_SCROLL_SIDE.BOTH;
+});
+const hasEndIntersect = computed(() => {
+  return props.side === INFINITE_SCROLL_SIDE.END || INFINITE_SCROLL_SIDE.BOTH;
+});
+const isIntersectMode = computed(() => {
+  return props.mode === INFINITE_SCROLL_MODE.INTERSECT;
+});
+const isManualMode = computed(() => {
+  return props.mode === INFINITE_SCROLL_MODE.MANUAL;
+});
+const isLoading = computed(() => {
+  return status.value === INFINITE_SCROLL_STATUS.LOADING;
+});
+const infiniteScrollStyles = computed(() => {
+  return [
+    colorStyles.value,
+    dimensionStyles.value,
+    props.style
+  ];
+});
+const infiniteScrollClasses = computed(() => {
+  return [
+    "origam-infinite-scroll",
+    `origam-infinite-scroll--${props.direction}`,
+    {
+      "origam-infinite-scroll--start": hasStartIntersect.value,
+      "origam-infinite-scroll--end": hasEndIntersect.value
+    },
+    props.class
+  ];
+});
+defineExpose({
+  filterProps
+});
+</script>

package/dist/src/components/InfiniteScroll/OrigamInfiniteScrollIntersect.vue

@@ -0,0 +1,30 @@
+<template>
+	<div
+			ref="intersectionRef"
+			class="origam-infinite-scroll-intersect"
+	>&nbsp;
+	</div>
+</template>
+
+<script setup>
+import { useIntersectionObserver, useProps } from "@origam/composables";
+import { watch } from "vue";
+const props = defineProps({
+  side: { type: null, required: false },
+  rootRef: { type: null, required: true },
+  margin: { type: 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 }
+});
+const emits = defineEmits(["intersect"]);
+const { filterProps } = useProps(props);
+const { intersectionRef, isIntersecting } = useIntersectionObserver(() => {
+}, props.margin ? { rootMargin: props.margin } : void 0);
+watch(isIntersecting, async (val) => {
+  emits("intersect", props.side, val);
+});
+defineExpose({
+  filterProps
+});
+</script>

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

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "FoxyInfiniteScroll", {
+Object.defineProperty(exports, "OrigamInfiniteScroll", {
   enumerable: true,
   get: function () {
-    return _FoxyInfiniteScroll.default;
+    return _OrigamInfiniteScroll.default;
   }
 });
-Object.defineProperty(exports, "FoxyInfiniteScrollIntersect", {
+Object.defineProperty(exports, "OrigamInfiniteScrollIntersect", {
   enumerable: true,
   get: function () {
-    return _FoxyInfiniteScrollIntersect.default;
+    return _OrigamInfiniteScrollIntersect.default;
   }
 });
-var _FoxyInfiniteScroll = _interopRequireDefault(require("./FoxyInfiniteScroll.vue"));
-var _FoxyInfiniteScrollIntersect = _interopRequireDefault(require("./FoxyInfiniteScrollIntersect.vue"));
+var _OrigamInfiniteScroll = _interopRequireDefault(require("./OrigamInfiniteScroll.vue"));
+var _OrigamInfiniteScrollIntersect = _interopRequireDefault(require("./OrigamInfiniteScrollIntersect.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

@@ -1,2 +1,2 @@
-export { default as FoxyInfiniteScroll } from './FoxyInfiniteScroll.vue';
-export { default as FoxyInfiniteScrollIntersect } from './FoxyInfiniteScrollIntersect.vue';
+export { default as OrigamInfiniteScroll } from './OrigamInfiniteScroll.vue';
+export { default as OrigamInfiniteScrollIntersect } from './OrigamInfiniteScrollIntersect.vue';

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

@@ -1,2 +1,2 @@
-export { default as FoxyInfiniteScroll } from "./FoxyInfiniteScroll.vue";
-export { default as FoxyInfiniteScrollIntersect } from "./FoxyInfiniteScrollIntersect.vue";
+export { default as OrigamInfiniteScroll } from "./OrigamInfiniteScroll.vue";
+export { default as OrigamInfiniteScrollIntersect } from "./OrigamInfiniteScrollIntersect.vue";