origam 2.5.0 → 2.6.2

package/dist/src/components/DataList/OrigamDataText.vue

@@ -1,5 +1,6 @@
 <template>
 	<dd
+			v-contrast
 			:class="dataTextClasses"
 			:style="dataTextStyles"
 	>
@@ -58,12 +59,15 @@
 	</dd>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamAvatar, OrigamIcon } from "../../components";
 import { useAdjacent, useBothColor, useDensity, useMargin, usePadding, useProps, useStyle } from "../../composables";
+import { vContrast } from "../../directives";
 import { computed, shallowRef, StyleValue, toRef } from "vue";
 const props = defineProps({
   text: { type: [String, Number], required: true },
+  hoverColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  hoverBgColor: { type: [String, Object, 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 },

package/dist/src/components/DataList/OrigamDataTitle.vue

@@ -1,5 +1,6 @@
 <template>
 	<dt
+			v-contrast
 			:class="dataTitleClasses"
 			:style="dataTitleStyles"
 	>
@@ -61,12 +62,15 @@
 	</dt>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamAvatar, OrigamIcon } from "../../components";
 import { useAdjacent, useBothColor, useDensity, useMargin, usePadding, useProps, useStyle } from "../../composables";
+import { vContrast } from "../../directives";
 import { computed, shallowRef, StyleValue, toRef } from "vue";
 const props = defineProps({
   text: { type: [String, Number], required: true },
+  hoverColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  hoverBgColor: { type: [String, Object, 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 },

package/dist/src/components/DataTable/OrigamDataTable.vue

@@ -4,7 +4,7 @@
 			:class="dataTableClasses"
 			:style="dataTableStyles"
 			v-bind="tableProps"
-			:ariaRowcount="itemsLength"
+			:aria-rowcount="itemsLength"
 	>
 		<template
 				v-if="slots.top"
@@ -80,7 +80,7 @@
 						<origam-data-table-rows
 								ref="origamDataTableRowsRef"
 								:items="paginatedItems"
-								v-bind="{ ...attrs, ...dataTableRowsProps }"
+								v-bind="dataTableRowsBindProps"
 						>
 						</origam-data-table-rows>
 					</slot>
@@ -109,7 +109,7 @@
 	</origam-table>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   OrigamDataTableFooter,
   OrigamDataTableHeaders,
@@ -190,8 +190,13 @@ const props = defineProps({
   width: { type: [Number, String], required: false },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   tag: { type: String, required: false, default: "div" },
+  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 },
   item: { type: Object, required: true },
-  cellProps: { type: null, required: false },
+  cellProps: { type: [Object, Function], required: false },
   mobileBreakpoint: { type: null, required: false, default: "xs" },
   expandOnClick: { type: Boolean, required: false },
   showExpand: { type: Boolean, required: false },
@@ -201,7 +206,7 @@ const props = defineProps({
   items: { type: Array, required: false },
   itemValue: { type: null, required: false },
   itemSelectable: { type: null, required: false },
-  rowProps: { type: null, required: false },
+  rowProps: { type: [Object, Function], required: false },
   returnObject: { type: Boolean, required: false },
   showSelect: { type: Boolean, required: false },
   selectStrategy: { type: null, required: false },
@@ -223,8 +228,8 @@ const props = defineProps({
   itemsPerPage: { type: [Number, String], required: false, default: 10 },
   customFilter: { type: Function, required: false },
   customKeyFilter: { type: Object, required: false },
-  filterKeys: { type: [String, Array], required: true },
-  filterMode: { type: null, required: true },
+  filterKeys: { type: [String, Array], required: false },
+  filterMode: { type: null, required: false },
   noFilter: { type: Boolean, required: false },
   prevIcon: { type: null, required: false },
   nextIcon: { type: null, required: false },
@@ -344,6 +349,9 @@ const dataTableHeadersProps = computed(() => {
 const dataTableRowsProps = computed(() => {
   return origamDataTableRowsRef.value?.filterProps(props, ["class", "style", "id", "items"]);
 });
+const dataTableRowsBindProps = computed(() => {
+  return { ...attrs, ...dataTableRowsProps.value };
+});
 const dataTableFooterProps = computed(() => {
   return origamDataTableFooterRef.value?.filterProps(props, ["class", "style", "id"]);
 });

package/dist/src/components/DataTable/OrigamDataTableColumnCell.vue

@@ -9,7 +9,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   useDimension,
   usePadding,

package/dist/src/components/DataTable/OrigamDataTableFooter.vue

@@ -40,7 +40,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamPagination, OrigamRow, OrigamSelect } from "../../components";
 import { useLocale, usePagination, useProps, useStyle } from "../../composables";
 import { DENSITY } from "../../enums";

package/dist/src/components/DataTable/OrigamDataTableGroupHeaderRow.vue

@@ -47,7 +47,7 @@
 	</tr>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamBtn, OrigamCheckboxBtn, OrigamDataTableColumnCell } from "../../components";
 import { useGroupBy, useHeaders, useProps, useSelection, useStyle } from "../../composables";
 import { MDI_ICONS } from "../../enums";

package/dist/src/components/DataTable/OrigamDataTableHeaderCell.vue

@@ -57,7 +57,7 @@
 	</origam-data-table-column-cell>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamCheckboxBtn, OrigamDataTableColumnCell, OrigamIcon } from "../../components";
 import {
   useBothColor,
@@ -83,7 +83,8 @@ const props = defineProps({
   multiSort: { type: Boolean, required: false },
   sortAscIcon: { type: null, required: false },
   sortDescIcon: { type: null, required: false },
-  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
 const { filterProps } = useProps(props);
 const { toggleSort, sortBy, isSorted } = useSort();

package/dist/src/components/DataTable/OrigamDataTableHeaders.vue

@@ -32,6 +32,7 @@
 		<tr class="origam-data-table-headers origam-data-table-headers--progress">
 			<th
 					:colspan="columns.length"
+					scope="col"
 					class="origam-data-table-headers__progress-cell"
 			>
 				<slot name="loader">
@@ -50,7 +51,7 @@
 	</template>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamDataTableHeadersCell, OrigamDataTableHeadersCellMobile, OrigamProgress } from "../../components";
 import {
   useDisplay,

package/dist/src/components/DataTable/OrigamDataTableHeadersCell.vue

@@ -22,7 +22,7 @@
 	</template>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamDataTableHeaderCell } from "../../components";
 import { useProps, useStyle } from "../../composables";
 import { computed, ref, StyleValue } from "vue";

package/dist/src/components/DataTable/OrigamDataTableHeadersCellMobile.vue

@@ -184,7 +184,7 @@
 	</tr>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamChip, OrigamDataTableColumnCell, OrigamSelect } from "../../components";
 import {
   useHeadersCell,

package/dist/src/components/DataTable/OrigamDataTableRow.vue

@@ -43,7 +43,7 @@
 							>
 								<origam-btn
 										:aria-expanded="isExpanded(item)"
-										:aria-label="isExpanded(item) ? 'Collapse row' : 'Expand row'"
+										:aria-label="isExpanded(item) ? t('origam.dataTableRow.collapseRow', 'Collapse row') : t('origam.dataTableRow.expandRow', 'Expand row')"
 										:icon="isExpanded(item) ? MDI_ICONS.CHEVRON_UP : MDI_ICONS.CHEVRON_DOWN"
 										:size="SIZES.SMALL"
 										@click="handleBtnClick"
@@ -80,13 +80,14 @@
 	</tr>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamBtn, OrigamCheckboxBtn, OrigamDataTableColumnCell } from "../../components";
 import {
   useCell,
   useDisplay,
   useExpanded,
   useHeaders,
+  useLocale,
   useProps,
   useSelection,
   useSort,
@@ -99,12 +100,13 @@ import { computed, inject, ref, Ref, StyleValue, toDisplayString, withModifiers
 const vm = getCurrentInstance("dataTableRow");
 const props = defineProps({
   item: { type: Object, required: true },
-  cellProps: { type: null, required: false },
+  cellProps: { type: [Object, Function], 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 },
   mobileBreakpoint: { type: null, required: false }
 });
+const { t } = useLocale();
 const emits = defineEmits(["expand", "select"]);
 const { filterProps } = useProps(props);
 const showSelect = inject(ORIGAM_DATA_TABLE_SHOW_SELECT_KEY, ref(false));

package/dist/src/components/DataTable/OrigamDataTableRows.vue

@@ -81,7 +81,7 @@
 	</template>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamDataTableGroupHeaderRow, OrigamDataTableRow, OrigamSkeleton } from "../../components";
 import { useDisplay, useExpanded, useGroupBy, useHeaders, useLoader, useLocale, usePagination, useProps, useSelection } from "../../composables";
 import { getPrefixedEventHandlers } from "../../utils";
@@ -91,8 +91,8 @@ const props = defineProps({
   hideNoData: { type: Boolean, required: false },
   items: { type: Array, required: false },
   noDataText: { type: String, required: false, default: "origam.noDataText" },
-  rowProps: { type: null, required: false },
-  cellProps: { type: null, required: false },
+  rowProps: { type: [Object, Function], required: false },
+  cellProps: { type: [Object, Function], 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 },

package/dist/src/components/DatePicker/OrigamDatePicker.vue

@@ -24,7 +24,6 @@
 				<origam-date-picker-header
 						key="header"
 						ref="origamDatePickerHeaderRef"
-						:header="t(header)"
 						v-bind="{ ...datePickerHeaderProps, ...headerProps }"
 						@click="!viewModeIsMonth ? handleClickDate : undefined"
 				/>
@@ -94,7 +93,7 @@
 	</origam-picker>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   OrigamDatePickerControls,
   OrigamDatePickerHeader,
@@ -155,6 +154,7 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   persistent: { type: Boolean, required: false },
   tag: { type: String, required: false },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },
@@ -170,8 +170,12 @@ const props = defineProps({
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   title: { type: String, required: false, default: "origam.datePicker.title" },
+  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 },
   disabledMonth: { type: Boolean, required: false },
   disabledYear: { type: Boolean, required: false },
   disabledNext: { type: Boolean, required: false },
@@ -187,27 +191,17 @@ const props = defineProps({
   showWeek: { type: Boolean, required: false },
   transition: { type: Object, required: false },
   reverseTransition: { type: Object, required: false },
-  view: { type: String, required: false },
-  currentDate: { type: [Date, String], required: false },
-  events: { type: Array, required: false },
-  firstDayOfWeek: { type: Number, required: false },
-  timeFormat: { type: String, required: false },
-  locale: { type: String, required: false },
-  selectable: { type: Boolean, required: false },
-  eventColorKey: { type: String, required: false },
-  categoryColors: { type: Object, required: false },
-  weekendHighlight: { type: Boolean, required: false },
-  showWeekNumbers: { type: Boolean, required: false },
-  dayStartHour: { type: Number, required: false },
-  dayEndHour: { type: Number, required: false },
-  slotDuration: { type: Number, required: false },
-  minDate: { type: [Date, String], required: false },
-  maxDate: { type: [Date, String], required: false },
-  disabledDates: { type: [Array, Function], required: false },
-  min: { type: null, required: false },
+  allowedDates: { type: [Array, Function], required: false },
+  displayValue: { type: null, required: false },
+  date: { type: Array, required: false },
+  month: { type: Number, required: false },
   max: { type: null, required: false },
-  month: { type: Number, required: true },
-  year: { type: Number, required: true },
+  min: { type: null, required: false },
+  showAdjacentMonths: { type: Boolean, required: false },
+  year: { type: Number, required: false },
+  weekdays: { type: Array, required: false },
+  weeksInMonth: { type: null, required: false, default: CALENDAR_STRATEGY.STATIC },
+  firstDayOfWeek: { type: Number, required: false },
   header: { type: String, required: false, default: "origam.datePicker.header" },
   appendAvatar: { type: String, required: false },
   appendIcon: { type: null, required: false },
@@ -365,7 +359,10 @@ const pickerProps = computed(() => {
   return origamPickerRef.value?.filterProps(props, ["class", "style", "title", "id"]);
 });
 const datePickerControlsProps = computed(() => {
-  return origamDatePickerControlsRef.value?.filterProps(props, ["class", "style", "id", "text", "disabled"]);
+  return origamDatePickerControlsRef.value?.filterProps(
+    props,
+    ["class", "style", "id", "text", "disabled"]
+  );
 });
 const datePickerHeaderProps = computed(() => {
   return origamDatePickerHeaderRef.value?.filterProps(props, ["class", "style", "header", "id"]);
@@ -435,9 +432,3 @@ defineExpose({
 		}
 	}
 </style>
-
-<style>
-	:root {
-
-	}
-</style>

package/dist/src/components/DatePicker/OrigamDatePickerControls.vue

@@ -52,13 +52,13 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamBtn, OrigamBtnGroup, OrigamSpacer } from "../../components";
 import { useProps, useStyle } from "../../composables";
 import { DATE_MODE, MDI_ICONS } from "../../enums";
 import { computed, StyleValue } from "vue";
 const props = defineProps({
-  active: { type: [String, Array], required: false },
+  active: { type: [String, Array, Boolean, Object], required: false },
   disabled: { type: Boolean, required: false },
   disabledMonth: { type: Boolean, required: false },
   disabledYear: { type: Boolean, required: false },

package/dist/src/components/DatePicker/OrigamDatePickerHeader.vue

@@ -68,7 +68,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamAvatar, OrigamIcon, OrigamTransition } from "../../components";
 import { useAdjacent, useDensity, useProps, useStyle } from "../../composables";
 import { computed, StyleValue, toRef, useSlots } from "vue";

package/dist/src/components/DatePicker/OrigamDatePickerMonth.vue

@@ -34,7 +34,7 @@
 
 		<origam-transition :transition="transition">
 			<div
-					:key="daysInMonth[0].date?.toString()"
+					:key="daysInMonth?.[0]?.date?.toString()"
 					ref="daysRef"
 					class="origam-date-picker-month__days"
 			>
@@ -66,7 +66,7 @@
 						<template v-if="showAdjacentMonths || !item.isAdjacent">
 							<slot
 									name="days"
-									v-bind="{props: { onClick: () => handleClick(e, item.date)}, item, index}"
+									v-bind="{props: { onClick: (e: MouseEvent) => handleClick(e, item.date)}, item, index}"
 							>
 								<origam-btn
 										ref="origamBtnRef"
@@ -91,7 +91,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamBtn, OrigamReverseTranslatePicker, OrigamTransition, OrigamTranslatePicker } from "../../components";
 import { useDatePickerCalendar, useDate, useProps, useStyle } from "../../composables";
 import { CALENDAR_STRATEGY, DENSITY } from "../../enums";
@@ -108,23 +108,18 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  view: { type: String, required: false },
-  currentDate: { type: [Date, String], required: false },
-  events: { type: Array, required: false },
-  firstDayOfWeek: { type: Number, required: false },
-  timeFormat: { type: String, required: false },
-  locale: { type: String, required: false },
-  selectable: { type: Boolean, required: false },
-  eventColorKey: { type: String, required: false },
-  categoryColors: { type: Object, required: false },
-  weekendHighlight: { type: Boolean, required: false },
-  showWeekNumbers: { type: Boolean, required: false },
-  dayStartHour: { type: Number, required: false },
-  dayEndHour: { type: Number, required: false },
-  slotDuration: { type: Number, required: false },
-  minDate: { type: [Date, String], required: false },
-  maxDate: { type: [Date, String], required: false },
-  disabledDates: { type: [Array, Function], required: false }
+  allowedDates: { type: [Array, Function], required: false },
+  disabled: { type: Boolean, required: false },
+  displayValue: { type: null, required: false },
+  date: { type: Array, required: false },
+  month: { type: Number, required: false },
+  max: { type: null, required: false },
+  min: { type: null, required: false },
+  showAdjacentMonths: { type: Boolean, required: false },
+  year: { type: Number, required: false },
+  weekdays: { type: Array, required: false, default: () => [0, 1, 2, 3, 4, 5, 6] },
+  weeksInMonth: { type: null, required: false, default: CALENDAR_STRATEGY.DYNAMIC },
+  firstDayOfWeek: { type: Number, required: false }
 });
 const { filterProps } = useProps(props);
 const daysRef = ref();
@@ -152,7 +147,7 @@ const atMax = computed(() => {
   return model.value.length >= max;
 });
 watch(daysInMonth, (val, oldVal) => {
-  if (!oldVal) return;
+  if (!val?.[0]?.date || !oldVal?.[0]?.date) return;
   isReverse.value = adapter.isBefore(val[0].date, oldVal[0].date);
 }, {
   immediate: true,
@@ -344,13 +339,6 @@ defineExpose({
 					}
 				}
 
-				#{$this}__day-btn {
-
-				}
-			}
-
-			&--today {
-
 			}
 
 			&--week {

package/dist/src/components/DatePicker/OrigamDatePickerMonths.vue

@@ -16,7 +16,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamBtn } from "../../components";
 import { useDate, useProps, useVModel, useStyle } from "../../composables";
 import { convertToUnit, createRange, int } from "../../utils";
@@ -24,8 +24,8 @@ import { computed, StyleValue, watchEffect } from "vue";
 const props = defineProps({
   min: { type: null, required: false },
   max: { type: null, required: false },
-  month: { type: Number, required: true },
-  year: { type: Number, required: true },
+  month: { type: Number, required: false },
+  year: { type: Number, 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 },

package/dist/src/components/DatePicker/OrigamDatePickerYears.vue

@@ -16,7 +16,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamBtn } from "../../components";
 import { useDate, useProps, useVModel, useStyle } from "../../composables";
 import { convertToUnit, createRange, int, templateRef } from "../../utils";
@@ -24,7 +24,7 @@ import { computed, nextTick, onMounted, StyleValue, watchEffect } from "vue";
 const props = defineProps({
   min: { type: null, required: false },
   max: { type: null, required: false },
-  year: { type: Number, required: true },
+  year: { type: Number, 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 },
@@ -67,7 +67,7 @@ watchEffect(() => {
   model.value = model.value ?? adapter.getYear(adapter.date());
 });
 const yearRef = templateRef();
-const btnProps = (year) => {
+const btnProps = (year, _index) => {
   return {
     ref: model.value === year.value ? yearRef : void 0,
     active: model.value === year.value,

package/dist/src/components/DatePickerField/OrigamDatePickerField.vue

@@ -75,9 +75,9 @@
 				<template #default>
 					<origam-date-picker
 							ref="origamDatePickerRef"
-							:model-value="model"
-							v-bind="{...datePickerProps}"
-							@update:model-value="handleSelectDate"
+							:model-value="(model as (string | Date)[])"
+							v-bind="(datePickerProps as Record<string, unknown>)"
+							@update:model-value="(handleSelectDate as (v: any) => void)"
 					/>
 				</template>
 			</origam-menu>
@@ -170,7 +170,7 @@
 	</origam-text-field>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   OrigamAvatar,
   OrigamChip,
@@ -224,6 +224,8 @@ const props = defineProps({
   reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
+  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
@@ -266,6 +268,11 @@ const props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { 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 },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   variant: { type: null, required: false },
@@ -429,19 +436,23 @@ const textFieldProps = computed(() => {
   return origamTextFieldRef.value?.filterProps(props, ["class", "id", "style", "dirty", "modelValue", "placeholder", "validationValue", "focused"]);
 });
 const datePickerProps = computed(() => {
-  return origamDatePickerRef.value?.filterProps(props, [
-    "class",
-    "id",
-    "style",
-    "modelValue",
-    "rounded",
-    "border",
-    "borderColor",
-    "borderStyle",
-    "density",
-    "direction"
-  ]);
+  return origamDatePickerRef.value?.filterProps(
+    props,
+    [
+      "class",
+      "id",
+      "style",
+      "modelValue",
+      "rounded",
+      "border",
+      "borderColor",
+      "borderStyle",
+      "density",
+      "direction"
+    ]
+  );
 });
+const validationValue = computed(() => model.value);
 const isDirty = computed(() => {
   return model.value.length > 0;
 });

package/dist/src/components/DefaultsProvider/OrigamDefaultsProvider.vue

@@ -2,7 +2,7 @@
 	<slot name="default"/>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed } from "vue";
 import { provideDefaults, useProps } from "../../composables";
 const props = defineProps({

package/dist/src/components/Dialog/OrigamDialog.vue

@@ -124,7 +124,7 @@
 	</origam-overlay>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, mergeProps, nextTick, ref, StyleValue, useSlots, watch } from "vue";
 import { getUid } from "../../utils";
 import { OrigamBtn, OrigamCard, OrigamIcon, OrigamOverlay, OrigamTranslateScale } from "../../components";

package/dist/src/components/Dialog/OrigamDialogConfirmation.vue

@@ -118,7 +118,7 @@
 	</origam-dialog>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, useSlots } from "vue";
 import { OrigamBtn, OrigamCol, OrigamContainer, OrigamDialog, OrigamRow } from "../../components";
 import { useProps, useVModel } from "../../composables";

package/dist/src/components/Divider/OrigamDivider.vue

@@ -7,7 +7,7 @@
 	/>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue, toRef, useAttrs } from "vue";
 import {
   useBothColor,
@@ -89,7 +89,7 @@ defineExpose({
 		height: 0px;
 		max-height: 0px;
 		max-width: var(--origam-divider---max-width, 100%);
-		opacity: 0.12;
+		opacity: var(--origam-divider---opacity, 0.12);
 		transition: inherit;
 		border-style: solid;