origam 2.5.0 → 2.6.1

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

@@ -6,7 +6,7 @@
 	/>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { useProps, useStyle } from "../../composables";
 import { SIZES_ARRAY } from "../../consts";
 import { convertToUnit } from "../../utils";

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

@@ -13,7 +13,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { useProps, useStyle } from "../../composables";
 import { SIZES_ARRAY } from "../../consts";
 import { computed, StyleValue } from "vue";

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

@@ -13,7 +13,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue, toRef, useAttrs, useSlots } from "vue";
 import {
   useBorder,

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

@@ -8,7 +8,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue } from "vue";
 import { useProps, useStyle } from "../../composables";
 import { SIZES_ARRAY } from "../../consts";

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

@@ -12,7 +12,7 @@
 				xmlns="http://www.w3.org/2000/svg"
 		>
 			<template v-if="!isArray(icon)">
-				<path :d="icon"></path>
+				<path :d="(icon as string)"></path>
 			</template>
 			<template v-else>
 				<template
@@ -34,7 +34,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue } from "vue";
 import { useProps, useStyle } from "../../composables";
 import { SIZES_ARRAY } from "../../consts";

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

@@ -2,7 +2,6 @@
 	<origam-responsive
 			v-intersect="intersect"
 			:aria-label="alt"
-			:aspect-ratio="aspectRatio"
 			:class="imgClasses"
 			:role="alt ? 'img' : undefined"
 			:style="imgStyles"
@@ -79,7 +78,7 @@
 	</origam-responsive>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   nextTick,
@@ -102,7 +101,7 @@ import {
   useRounded,
   useStyle
 } from "../../composables";
-import { SUPPORTS_INTERSECTION } from "../../consts";
+import { IN_BROWSER, SUPPORTS_INTERSECTION } from "../../consts";
 import { vIntersect } from "../../directives";
 import { IMG_STATE } from "../../enums";
 import { convertToUnit, getCurrentInstance, pick } from "../../utils";
@@ -216,7 +215,7 @@ const init = (isIntersecting) => {
   }
   if (!normalisedSrc.value.src) return;
   nextTick(() => {
-    emits("loadstart", image.value?.currentSrc || normalisedSrc.value.src);
+    emits("loadstart", { src: image.value?.currentSrc || normalisedSrc.value.src || "" });
     setTimeout(() => {
       if (vm.isUnmounted) return;
       if (image.value?.complete) {
@@ -238,7 +237,7 @@ const onLoad = () => {
   getSrc();
   pollForSize(image.value);
   state.value = "loaded";
-  emits("load", image.value?.currentSrc || normalisedSrc.value.src);
+  emits("load", { src: image.value?.currentSrc || normalisedSrc.value.src || "" });
 };
 const handleLoad = () => {
   onLoad();
@@ -246,7 +245,7 @@ const handleLoad = () => {
 const onError = () => {
   if (vm.isUnmounted) return;
   state.value = "error";
-  emits("error", image.value?.currentSrc || normalisedSrc.value.src);
+  emits("error", { src: image.value?.currentSrc || normalisedSrc.value.src || "" });
 };
 const handleError = () => {
   onError();
@@ -280,11 +279,13 @@ const isBooted = shallowRef(false);
 let stop = null;
 const markBooted = (val) => {
   if (val) {
-    requestAnimationFrame(() => {
+    if (IN_BROWSER) {
       requestAnimationFrame(() => {
-        isBooted.value = true;
+        requestAnimationFrame(() => {
+          isBooted.value = true;
+        });
       });
-    });
+    }
     stop?.();
   }
 };

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

@@ -5,7 +5,7 @@
 			:class="infiniteScrollClasses"
 			:style="infiniteScrollStyles"
 	>
-		<div class="origam-infinite-scroll__side" role="status" aria-live="polite">
+		<div class="origam-infinite-scroll__side" role="status" aria-live="polite" :style="typographyStyles">
 			<template v-if="hasStartIntersect">
 				<slot
 						name="error"
@@ -16,7 +16,7 @@
 						name="empty"
 						v-bind="{side: INFINITE_SCROLL_SIDE.START, props: { onClick: () => intersecting(INFINITE_SCROLL_SIDE.START), color }}"
 				>
-					<span>No more</span>
+					<span>{{ t(emptyText) }}</span>
 				</slot>
 
 				<template v-if="isManualMode">
@@ -69,7 +69,7 @@
 			/>
 		</template>
 
-		<div class="origam-infinite-scroll__side" role="status" aria-live="polite">
+		<div class="origam-infinite-scroll__side" role="status" aria-live="polite" :style="typographyStyles">
 			<template v-if="hasStartIntersect">
 				<slot
 						name="error"
@@ -113,7 +113,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, nextTick, onMounted, ref, shallowRef, StyleValue, toRef } from "vue";
 import { OrigamBtn, OrigamInfiniteScrollIntersect, OrigamProgress } from "../../components";
 import {
@@ -121,7 +121,8 @@ import {
   useDimension,
   useLocale,
   useProps,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
 import {
   DIRECTION,
@@ -148,12 +149,18 @@ const props = defineProps({
   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 }
+  direction: { type: null, required: false, default: DIRECTION.VERTICAL },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
 });
 const emits = defineEmits(["load"]);
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const { dimensionStyles } = useDimension(props);
+const { typographyStyles } = useTypography(props, "infinite-scroll__loader");
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const rootEl = ref();
 const isIntersecting = shallowRef(false);
@@ -206,7 +213,7 @@ const status = computed({
   }
 });
 let previousScrollSize = 0;
-const handleIntersect = (side, _isIntersecting) => {
+const handleIntersect = ({ side, isIntersecting: _isIntersecting }) => {
   isIntersecting.value = _isIntersecting;
   if (isIntersecting.value) {
     intersecting(side);

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

@@ -6,7 +6,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { watch } from "vue";
 import { useIntersectionObserver, useProps } from "../../composables";
 const props = defineProps({
@@ -22,7 +22,8 @@ const { filterProps } = useProps(props);
 const { intersectionRef, isIntersecting } = useIntersectionObserver(() => {
 }, props.margin ? { rootMargin: props.margin } : void 0);
 watch(isIntersecting, async (val) => {
-  emits("intersect", props.side, val);
+  if (!props.side) return;
+  emits("intersect", { isIntersecting: val, side: props.side });
 });
 defineExpose({
   filterProps

package/dist/src/components/InlineEdit/OrigamInlineEdit.vue

@@ -187,7 +187,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   nextTick,
@@ -196,11 +196,12 @@ import {
   watch
 } from "vue";
 import { OrigamBtn, OrigamTextField, OrigamTextareaField } from "../../components";
-import { useInlineEdit } from "../../composables";
+import { useInlineEdit, useTypography } from "../../composables";
 import { INLINE_EDIT_ACTION, MDI_ICONS } from "../../enums";
 const props = defineProps({
   modelValue: { type: [String, Number], required: true },
   placeholder: { type: String, required: false, default: "Click to edit" },
+  rules: { type: Array, required: false, default: void 0 },
   validate: { type: Function, required: false, default: void 0 },
   autoFocus: { type: Boolean, required: false, default: true },
   selectOnFocus: { type: Boolean, required: false, default: true },
@@ -216,7 +217,12 @@ const props = defineProps({
   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: "span" }
+  tag: { type: String, required: false, default: "span" },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
 });
 const emit = defineEmits(["update:modelValue", "edit", "cancel", "confirm", "validate-error"]);
 const modelRef = computed(() => props.modelValue);
@@ -230,6 +236,7 @@ const {
   cancel,
   setValue
 } = useInlineEdit(modelRef, {
+  rules: props.rules,
   validate: props.validate,
   trim: props.trim,
   onConfirm: (value) => {
@@ -315,7 +322,9 @@ const rootClasses = computed(() => [
   },
   props.class
 ]);
-const rootStyles = computed(() => [props.style]);
+const { typographyStyles: errorTypoStyles } = useTypography(props, "inline-edit__error");
+const { typographyStyles: actionBtnTypoStyles } = useTypography(props, "inline-edit__action-btn");
+const rootStyles = computed(() => [props.style, errorTypoStyles.value, actionBtnTypoStyles.value]);
 defineExpose({
   edit: handleEnterEdit,
   confirm: handleConfirm,

package/dist/src/components/Input/OrigamInput.vue

@@ -1,5 +1,6 @@
 <template>
 	<div
+			v-contrast
 			:class="inputClasses"
 			:style="inputStyles"
 	>
@@ -90,10 +91,11 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue, toRef, useSlots } from "vue";
 import { OrigamAvatar, OrigamIcon } from "../../components";
 import { OrigamMessages } from "../../components/Messages";
+import { vContrast } from "../../directives";
 import {
   useAdjacent,
   useBothColor,
@@ -104,6 +106,7 @@ import {
   useRtl,
   useSize,
   useStyle,
+  useTypography,
   useValidation
 } from "../../composables";
 import { DENSITY, DIRECTION } from "../../enums";
@@ -158,7 +161,7 @@ const _props = defineProps({
   width: { type: [Number, String], required: false },
   direction: { type: null, required: false, default: DIRECTION.HORIZONTAL },
   disabled: { type: Boolean, required: false },
-  error: { type: Boolean, required: false },
+  error: { type: [String, Boolean], required: false },
   errorMessages: { type: [Array, String], required: false },
   maxErrors: { type: [Number, String], required: false },
   name: { type: String, required: false },
@@ -173,7 +176,12 @@ const _props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
-  size: { type: null, required: false }
+  size: { type: null, required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
 });
 const props = useDefaults(_props);
 defineEmits(["update:modelValue", "click:append", "click:prepend", "update:focused"]);
@@ -239,10 +247,12 @@ const { dimensionStyles } = useDimension(props);
 const { colorClasses, colorStyles } = useBothColor(toRef(props.bgColor), toRef(props.color));
 const { rtlClasses } = useRtl();
 const { sizeClasses } = useSize(props, "origam-input");
+const { typographyStyles } = useTypography(props, "input");
 const inputStyles = computed(() => {
   return [
     dimensionStyles.value,
     colorStyles.value,
+    typographyStyles.value,
     props.style
   ];
 });
@@ -347,6 +357,10 @@ defineExpose({
 			--origam-input---density: -8px;
 		}
 
+		&--density-comfortable {
+			--origam-input---density: 8px;
+		}
+
 		&--size-small {
 			--origam-input__control---height:        var(--origam-input__control---height-sm, 28px);
 			--origam-field__input---padding-top:     var(--origam-field__input---padding-block-sm, 2px);

package/dist/src/components/ItemGroup/OrigamItem.vue

@@ -11,7 +11,7 @@
   </component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue } from "vue";
 import {
   useGroupItem,

package/dist/src/components/ItemGroup/OrigamItemGroup.vue

@@ -13,7 +13,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue } from "vue";
 import { OrigamDefaultsProvider } from "../../components";
 import {

package/dist/src/components/Kbd/OrigamKbd.vue

@@ -1,5 +1,6 @@
 <template>
 	<kbd
+			v-contrast
 			:class="kbdClasses"
 			:style="kbdStyles"
 	>
@@ -25,14 +26,16 @@
 	</kbd>
 </template>
 
-<script setup>
+<script lang="ts" setup>
+import { vContrast } from "../../directives";
 import {
   useBorder,
   useBothColor,
   useProps,
   useRounded,
   useSize,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
 import { computed, StyleValue, toRef } from "vue";
 const _props = defineProps({
@@ -59,13 +62,19 @@ const _props = defineProps({
   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 }
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
 });
 const props = _props;
 const { filterProps } = useProps(props);
 const { sizeClasses, sizeStyles } = useSize(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
 const { borderClasses, borderStyles } = useBorder(props);
+const { typographyStyles } = useTypography(props, "kbd");
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const kbdClasses = computed(() => {
   return [
@@ -87,6 +96,7 @@ const kbdStyles = computed(() => {
     roundedStyles.value,
     borderStyles.value,
     colorStyles.value,
+    typographyStyles.value,
     props.style
   ];
 });
@@ -190,11 +200,11 @@ defineExpose({
 			box-shadow: none;
 		}
 
-		&--size-x-small { font-size: var(--origam-kbd---font-size-xs, 0.625rem); }
-		&--size-small   { font-size: var(--origam-kbd---font-size-sm, 0.75rem); }
-		&--size-default { font-size: var(--origam-kbd---font-size-md, 0.875rem); }
-		&--size-large   { font-size: var(--origam-kbd---font-size-lg, 1rem); }
-		&--size-x-large { font-size: var(--origam-kbd---font-size-xl, 1.125rem); }
+		&--size-x-small { font-size: var(--origam-kbd---font-size, var(--origam-kbd---font-size-xs, 0.625rem)); }
+		&--size-small   { font-size: var(--origam-kbd---font-size, var(--origam-kbd---font-size-sm, 0.75rem)); }
+		&--size-default { font-size: var(--origam-kbd---font-size, var(--origam-kbd---font-size-md, 0.875rem)); }
+		&--size-large   { font-size: var(--origam-kbd---font-size, var(--origam-kbd---font-size-lg, 1rem)); }
+		&--size-x-large { font-size: var(--origam-kbd---font-size, var(--origam-kbd---font-size-xl, 1.125rem)); }
 
 		&--rounded         { --origam-kbd---border-radius: var(--origam-radius---sm, 4px); }
 		&--rounded-x-small { --origam-kbd---border-radius: var(--origam-radius---xs, 2px); }

package/dist/src/components/Label/OrigamLabel.vue

@@ -2,6 +2,7 @@
 	<component
 			:is="tag"
 			:id="id"
+			v-contrast
 			:class="labelClasses"
 			:style="labelStyles"
 			:name="name"
@@ -13,7 +14,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue, toRef } from "vue";
 import {
   useBorder,
@@ -23,8 +24,10 @@ import {
   usePadding,
   useProps,
   useRounded,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
+import { vContrast } from "../../directives";
 const _props = defineProps({
   text: { type: String, required: false },
   floating: { type: Boolean, required: false },
@@ -63,7 +66,12 @@ const _props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  tag: { type: String, required: false, default: "label" }
+  tag: { type: String, required: false, default: "label" },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
 });
 const props = useDefaults(_props);
 const emits = defineEmits(["click"]);
@@ -76,6 +84,7 @@ const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { marginClasses, marginStyles } = useMargin(props);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { typographyStyles } = useTypography(props, "label");
 const labelStyles = computed(() => {
   return [
     roundedStyles.value,
@@ -83,6 +92,7 @@ const labelStyles = computed(() => {
     paddingStyles.value,
     marginStyles.value,
     colorStyles.value,
+    typographyStyles.value,
     props.style
   ];
 });
@@ -120,6 +130,7 @@ defineExpose({
 		line-height:     var(--origam-label---line-height);
 		letter-spacing:  var(--origam-label---letter-spacing);
 		pointer-events:  var(--origam-label---pointer-events);
+		transition-property:        var(--origam-label---transition-property, color);
 		transition-duration:        var(--origam-label---transition-duration);
 		transition-timing-function: var(--origam-label---transition-easing);
 

package/dist/src/components/Layout/OrigamLayout.vue

@@ -14,7 +14,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue, toRef } from "vue";
 import {
   useBorder,

package/dist/src/components/Lazy/OrigamLazy.vue

@@ -17,7 +17,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue } from "vue";
 import { OrigamFade, OrigamTransition } from "../../components";
 import {

package/dist/src/components/List/OrigamList.vue

@@ -84,7 +84,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, shallowRef, StyleValue, toRef, useSlots } from "vue";
 import { OrigamDefaultsProvider, OrigamListChildren } from "../../components";
 import {

package/dist/src/components/List/OrigamListChildren.vue

@@ -75,7 +75,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, useSlots } from "vue";
 import { OrigamDivider, OrigamListGroup, OrigamListItem, OrigamListSubheader } from "../../components";
 import { useCreateList, useProps } from "../../composables";

package/dist/src/components/List/OrigamListGroup.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			v-contrast
 			:class="listGroupClasses"
 			:style="listGroupStyles"
 	>
@@ -41,7 +42,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue, toRef } from "vue";
 import { OrigamDefaultsProvider, OrigamExpandY, OrigamListGroupActivator, OrigamListItem, OrigamTransition } from "../../components";
 import {
@@ -54,6 +55,7 @@ import {
   useStateEffect,
   useStyle
 } from "../../composables";
+import { vContrast } from "../../directives";
 import { MDI_ICONS } from "../../enums";
 const props = defineProps({
   collapseIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_UP },
@@ -141,6 +143,7 @@ const activatorProps = computed(() => {
     "onClick": handleClick
   };
 });
+const activatorEvents = computed(() => ({}));
 const prependActivatorIcon = computed(() => {
   return props.prependIcon;
 });

package/dist/src/components/List/OrigamListGroupActivator.vue

@@ -8,7 +8,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue } from "vue";
 import {
   useNestedGroupActivator,

package/dist/src/components/List/OrigamListItem.vue

@@ -1,8 +1,8 @@
 <template>
 	<component
 			:is="link.tag"
-			v-ripple="isClickable && ripple"
 			:id="props.id"
+			v-ripple="isClickable && ripple"
 			:class="listItemClasses"
 			:href="link.href.value"
 			:style="listItemStyles"
@@ -54,6 +54,7 @@
 						v-if="hasTitle"
 						key="title"
 						class="origam-list-item__title"
+						:style="titleTypographyStyles"
 				>
 					<slot
 							name="title"
@@ -66,6 +67,7 @@
 						v-if="hasSubtitle"
 						key="subtitle"
 						class="origam-list-item__subtitle"
+						:style="subtitleTypographyStyles"
 				>
 					<slot
 							name="subtitle"
@@ -108,7 +110,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, onBeforeMount, StyleValue, toRef, useAttrs, useSlots, watch } from "vue";
 import { OrigamAvatar, OrigamIcon } from "../../components";
 import {
@@ -123,7 +125,8 @@ import {
   useNestedItem,
   useProps,
   useStateEffect,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
 import { vRipple } from "../../directives";
 import { KEYBOARD_VALUES } from "../../enums";
@@ -190,7 +193,12 @@ const _props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
-  hover: { type: [Boolean, Object], required: false }
+  hover: { type: [Boolean, Object], required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
 });
 const props = useDefaults(_props);
 const emits = defineEmits(["click", "click:append", "click:prepend"]);
@@ -223,6 +231,8 @@ const {
   marginStyles
 } = useStateEffect(props, isHover, void 0, hoverState, void 0);
 const { dimensionStyles } = useDimension(props);
+const { typographyStyles: titleTypographyStyles } = useTypography(props, "list-item__title");
+const { typographyStyles: subtitleTypographyStyles } = useTypography(props, "list-item__subtitle");
 const {
   onClickPrepend: handleClickPrepend,
   onClickAppend: handleClickAppend,