origam 2.16.0 → 2.17.1

package/dist/src/components/FileField/OrigamFileField.vue

@@ -226,13 +226,13 @@
                         <div class="origam-file-field__selection">
                           <slot
                               name="chip"
-                              v-bind="{ fileNames: filename, totalBytes: totalBytes, totalBytesReadable: totalBytesReadable, props: chipProps }"
+                              v-bind="{ fileNames: filename, totalBytes: totalBytes, totalBytesReadable: totalBytesReadable, props: resolvedChipProps }"
                           >
                             <origam-chip
                                 key="chip"
                                 :model-value="true"
                                 size="small"
-                                v-bind="chipProps"
+                                v-bind="resolvedChipProps"
                                 @click:close.prevent.stop="handleRemove(index)"
                             >
                               <template #default>
@@ -304,12 +304,17 @@
                 <origam-file-field-list-item
                     :file="item"
                     :index="idx"
+                    :progress="getProgress(idx)"
                     :file-icon="fileIcon"
+                    :download-icon="downloadIcon"
                     :remove-icon="removeIcon"
+                    :downloadable="downloadable"
                     :disabled="isDisabled"
                     :readonly="isReadonly"
+                    :color="color"
                     :show-size="showSize"
                     @click:remove="handleRemove(idx)"
+                    @click:download="handleDownload(idx, item)"
                 />
               </slot>
             </template>
@@ -375,24 +380,30 @@
 
 <script lang="ts" setup>
 import { computed, nextTick, ref, StyleValue, toRef, useAttrs, useSlots, watch } from "vue";
-import { OrigamChip, OrigamCounter, OrigamField, OrigamIcon, OrigamInput } from "../../components";
+import OrigamChip from "../Chip/OrigamChip.vue";
+import OrigamCounter from "../Counter/OrigamCounter.vue";
+import OrigamField from "../Field/OrigamField.vue";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import OrigamInput from "../Input/OrigamInput.vue";
 import OrigamFileFieldDragNDropItem from "./OrigamFileFieldDragNDropItem.vue";
 import OrigamFileFieldListItem from "./OrigamFileFieldListItem.vue";
-import {
-  useAdjacent,
-  useAdjacentInner,
-  useBothColor,
-  useDefaults,
-  useDensity,
-  useFocus,
-  useLocale,
-  useProps,
-  useStyle,
-  useVModel
-} from "../../composables";
-import { DENSITY, FILE_FIELD_DISPLAY, MDI_ICONS } from "../../enums";
-import { filterInputAttrs, forwardRefs, humanReadableFileSize, wrapInArray } from "../../utils";
-const _props = defineProps({
+import { BORDER_PROP_KEYS } from "../../consts/Commons/border.const";
+import { useAdjacent } from "../../composables/Commons/adjacent.composable";
+import { useAdjacentInner } from "../../composables/Commons/adjacentInner.composable";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useFocus } from "../../composables/Commons/focus.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { FILE_FIELD_DISPLAY } from "../../enums/FileField/file-field.enum";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
+import { filterInputAttrs } from "../../utils/Input/input.util";
+import { forwardRefs } from "../../utils/Commons/forwardRefs.util";
+import { humanReadableFileSize, wrapInArray } from "../../utils/Commons/commons.util";
+const props = defineProps({
   chips: { type: Boolean, required: false },
   counter: { type: Boolean, required: false },
   counterSizeString: { type: String, required: false, default: "origam.file_field.counter_size" },
@@ -404,8 +415,6 @@ const _props = defineProps({
   showSize: { type: [Boolean, Number], required: false, default: false },
   modelValue: { type: null, required: false },
   chipProps: { type: Object, required: false },
-  divider: { type: String, required: false, default: "," },
-  iconColor: { type: String, required: false },
   maxFileSize: { type: Number, required: false },
   dragndrop: { type: Boolean, required: false },
   dragndropIcon: { type: String, required: false, default: MDI_ICONS.CLOUD_UPLOAD_OUTLINE },
@@ -416,7 +425,6 @@ const _props = defineProps({
   progress: { type: Array, required: false },
   dropzoneTitle: { type: String, required: false, default: "origam.file_field.dropzone_title" },
   dropzoneSubtitle: { type: String, required: false, default: "origam.file_field.dropzone_subtitle" },
-  browseText: { type: String, required: false, default: "origam.file_field.browse" },
   maxFileSizeErrorString: { type: String, required: false, default: "origam.validation.max_size_error" },
   display: { type: null, required: false, default: "list" },
   dropzone: { type: Boolean, required: false },
@@ -429,17 +437,13 @@ const _props = defineProps({
   dirty: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   error: { type: [String, Boolean], required: false },
-  flat: { type: Boolean, required: false },
   inline: { type: Boolean, required: false },
   label: { type: String, required: false },
   prefix: { type: String, required: false },
   suffix: { type: String, required: false },
   persistentClear: { type: Boolean, required: false },
-  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 },
@@ -450,6 +454,19 @@ const _props = defineProps({
   prependInnerIcon: { type: null, required: false, default: MDI_ICONS.PAPERCLIP },
   clearIcon: { type: null, required: false },
   clearable: { type: Boolean, required: false, default: true },
+  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: 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 },
+  borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   focused: { type: Boolean, required: false },
   text: { type: String, required: false },
   floating: { type: Boolean, required: false },
@@ -468,25 +485,11 @@ const _props = defineProps({
   paddingRight: { type: [Boolean, Number, String], required: false },
   paddingBlock: { type: [Boolean, Number, String], required: false },
   paddingInline: { type: [Boolean, Number, String], required: false },
-  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: 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 },
-  borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true, default: 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 },
-  fontFamily: { type: null, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
   lineHeight: { type: null, required: false },
@@ -519,7 +522,6 @@ const _props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false }
 });
-const props = useDefaults(_props);
 const isDropzoneMode = computed(() => Boolean(props.dropzone || props.dragndrop));
 const displayMode = computed(() => {
   if (props.chips) return FILE_FIELD_DISPLAY.CHIPS;
@@ -534,7 +536,7 @@ const fileList = computed(() => {
   const m = model.value;
   return Array.isArray(m) ? m : [];
 });
-const emits = defineEmits(["click:control", "mousedown:control", "click:remove", "click:download", "drop", "error:max-size", "update:focused", "update:modelValue", "click:appendInner", "click:prependInner", "click:clear", "update:active", "click:append", "click:prepend"]);
+const emits = defineEmits(["click:control", "mousedown:control", "click:remove", "click:download", "drop", "error:max-size", "update:focused", "click:appendInner", "click:prependInner", "click:clear", "update:modelValue", "click:append", "click:prepend"]);
 defineSlots();
 const slots = useSlots();
 const attrs = useAttrs();
@@ -542,7 +544,7 @@ const { t } = useLocale();
 const model = useVModel(
   props,
   "modelValue",
-  props.multiple ? [] : null,
+  () => props.multiple ? [] : null,
   (val) => wrapInArray(val),
   (val) => props.multiple || Array.isArray(props.modelValue) ? val : val[0] ?? null
 );
@@ -559,7 +561,7 @@ const origamFieldRef = ref();
 const inputRef = ref();
 const { isFocused, onFocus, onBlur: handleBlur } = useFocus(props);
 const isActive = computed(() => {
-  return isFocused.value || props.active;
+  return props.persistentPlaceholder || isFocused.value || props.active;
 });
 const handleFocus = () => {
   nextTick(() => {
@@ -721,10 +723,11 @@ const hasInlineCounter = computed(() => {
 const inlineCounterValue = computed(() => {
   return model.value?.length ?? 0;
 });
-const chipProps = computed(() => {
+const resolvedChipProps = computed(() => {
   return {
     closable: !props.disabled && !props.readonly,
-    color: props.color
+    color: props.color,
+    ...props.chipProps
   };
 });
 const getProgress = (index) => {
@@ -738,7 +741,7 @@ const dropzoneSubtitleText = computed(() => {
 });
 const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
 const inputProps = computed(() => {
-  return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "id", "focused"]);
+  return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "focused", ...BORDER_PROP_KEYS]);
 });
 const fieldProps = computed(() => {
   return origamFieldRef.value?.filterProps(props, ["class", "style", "id", "active", "dirty", "disabled", "focused", "error"]);
@@ -863,7 +866,7 @@ defineExpose(forwardRefs({
     &__dropzone {
       align-items: center;
       background-color: var(--origam-file-field__dropzone---background-color, transparent);
-      border: var(--origam-file-field__dropzone---border-width, 2px) var(--origam-file-field__dropzone---border-style, dashed) var(--origam-file-field__dropzone---color, var(--origam-color__border---default));
+      border: var(--origam-file-field__dropzone---border-width, 2px) var(--origam-file-field__dropzone---border-style, dashed) var(--origam-file-field__dropzone---border-color, var(--origam-file-field__dropzone---color, var(--origam-color__border---default)));
       border-radius: var(--origam-file-field__dropzone---border-radius, 8px);
       color: var(--origam-file-field__dropzone---color, inherit);
       cursor: var(--origam-file-field__dropzone---cursor, pointer);
@@ -873,6 +876,7 @@ defineExpose(forwardRefs({
       justify-content: center;
       min-height: calc(var(--origam-file-field__dropzone---min-height, 140px) + var(--origam-file-field__dropzone---density, 0px));
       padding: calc(var(--origam-file-field__dropzone---padding, 24px) + var(--origam-file-field__dropzone---density, 0px));
+      padding-block: calc(var(--origam-file-field__dropzone---padding-block, var(--origam-file-field__dropzone---padding, 24px)) + var(--origam-file-field__dropzone---density, 0px));
       position: relative;
       text-align: center;
       transition: border-color var(--origam-file-field---transition-duration, 200ms) ease, background-color var(--origam-file-field---transition-duration, 200ms) ease;
@@ -882,7 +886,7 @@ defineExpose(forwardRefs({
       }
 
       &--dragging {
-        background-color: var(--origam-file-field__dropzone---bg-dragging, var(--origam-file-field__dropzone--dragging---background-color, var(--origam-color__feedback--info---bg-subtle)));
+        background-color: var(--origam-file-field__dropzone---bg-dragging, var(--origam-file-field__dropzone--dragging---background-color, var(--origam-color__feedback--info---bgSubtle)));
         border-color: var(--origam-file-field__dropzone---border-color-dragging, var(--origam-file-field__dropzone--dragging---border-color, var(--origam-color__feedback--info---bg)));
       }
 
@@ -891,12 +895,12 @@ defineExpose(forwardRefs({
 
         .origam-file-field__dropzone-icon,
         .origam-file-field__dropzone-title {
-          color: var(--origam-file-field__dropzone--error---fg, var(--origam-color__feedback--danger---fg-subtle));
+          color: var(--origam-file-field__dropzone--error---fg, var(--origam-color__feedback--danger---fgSubtle));
         }
       }
 
       &-error {
-        color: var(--origam-file-field__dropzone--error---fg, var(--origam-color__feedback--danger---fg-subtle));
+        color: var(--origam-file-field__dropzone--error---fg, var(--origam-color__feedback--danger---fgSubtle));
         font-size: var(--origam-file-field__dropzone---subtitle-font-size, 0.75rem);
         margin-top: var(--origam-file-field__dropzone---gap-deck, 8px);
       }

package/dist/src/components/FileField/OrigamFileFieldDragNDropItem.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+      :id="id"
       :class="dragNDropItemClasses"
       :style="dragNDropItemStyles"
   >
@@ -15,7 +16,10 @@
         >
           {{ file.name }}
         </div>
-        <div class="origam-file-field-dragndrop-item__meta">
+        <div
+            v-if="hasSize"
+            class="origam-file-field-dragndrop-item__meta"
+        >
           {{ humanReadableFileSize(file.size, base) }}
         </div>
         <origam-progress
@@ -29,6 +33,17 @@
       </div>
       <div class="origam-file-field-dragndrop-item__actions">
         <origam-btn
+            v-if="downloadable"
+            :aria-label="downloadAriaLabel"
+            :icon="downloadIcon"
+            data-cy="file-field-item-download"
+            flat
+            size="small"
+            :disabled="disabled"
+            @click.stop.prevent="handleDownload"
+        />
+        <origam-btn
+            :aria-label="removeAriaLabel"
             :icon="removeIcon"
             flat
             size="small"
@@ -42,21 +57,23 @@
 
 <script lang="ts" setup>
 import { computed, StyleValue } from "vue";
-import { OrigamBtn, OrigamIcon, OrigamProgress } from "../../components";
-import {
-  useDefaults,
-  useProps,
-  useStyle,
-  useTypography
-} from "../../composables";
-import { MDI_ICONS } from "../../enums";
-import { humanReadableFileSize } from "../../utils";
-const _props = defineProps({
+import OrigamBtn from "../Btn/OrigamBtn.vue";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import OrigamProgress from "../Progress/OrigamProgress.vue";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
+import { humanReadableFileSize } from "../../utils/Commons/commons.util";
+const props = defineProps({
   file: { type: null, required: true },
   index: { type: Number, required: true },
   progress: { type: Number, required: false },
   fileIcon: { type: String, required: false, default: MDI_ICONS.FILE },
   removeIcon: { type: String, required: false, default: MDI_ICONS.CLOSE },
+  downloadIcon: { type: String, required: false, default: MDI_ICONS.DOWNLOAD },
+  downloadable: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },
   showSize: { type: [Boolean, Number], required: false },
@@ -64,24 +81,33 @@ 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 },
-  fontFamily: { type: null, required: false },
   fontSize: { type: null, required: false },
-  fontWeight: { type: null, required: false },
-  lineHeight: { type: null, required: false },
-  letterSpacing: { type: null, required: false }
+  fontWeight: { type: null, required: false }
 });
-const props = useDefaults(_props);
-const emits = defineEmits(["click:remove"]);
+const emits = defineEmits(["click:remove", "click:download"]);
 defineSlots();
+const { t } = useLocale();
 const handleRemove = () => {
   emits("click:remove", { file: props.file, index: props.index });
 };
+const handleDownload = () => {
+  emits("click:download", { file: props.file, index: props.index });
+};
 const base = computed(() => {
   return typeof props.showSize !== "boolean" ? props.showSize : void 0;
 });
+const hasSize = computed(() => {
+  return props.showSize !== false;
+});
 const hasProgress = computed(() => {
   return typeof props.progress === "number";
 });
+const removeAriaLabel = computed(() => {
+  return t("origam.file_field.remove_aria_label", props.file.name);
+});
+const downloadAriaLabel = computed(() => {
+  return t("origam.file_field.download_aria_label", props.file.name);
+});
 const dragNDropItemStyles = computed(() => {
   return [
     props.style
@@ -95,7 +121,7 @@ const dragNDropItemClasses = computed(() => {
 });
 const { typographyStyles } = useTypography(props, "file-field-dragndrop-item__name");
 const { filterProps } = useProps(props);
-const { id, css, load, isLoaded, unload } = useStyle(dragNDropItemStyles);
+const { id, css, load, isLoaded, unload } = useStyle(dragNDropItemStyles, () => props.id);
 defineExpose({
   filterProps,
   css,

package/dist/src/components/FileField/OrigamFileFieldListItem.vue

@@ -1,5 +1,6 @@
 <template>
   <li
+      :id="id"
       :class="listItemClasses"
       :style="listItemStyles"
   >
@@ -15,7 +16,10 @@
         >
           {{ file.name }}
         </div>
-        <div class="origam-file-field-list-item__meta">
+        <div
+            v-if="hasSize"
+            class="origam-file-field-list-item__meta"
+        >
           {{ humanReadableFileSize(file.size, base) }}
         </div>
         <origam-progress
@@ -29,6 +33,17 @@
       </div>
       <div class="origam-file-field-list-item__actions">
         <origam-btn
+            v-if="downloadable"
+            :aria-label="downloadAriaLabel"
+            :icon="downloadIcon"
+            data-cy="file-field-item-download"
+            flat
+            size="small"
+            :disabled="disabled"
+            @click.stop="handleDownload"
+        />
+        <origam-btn
+            :aria-label="removeAriaLabel"
             :icon="removeIcon"
             flat
             size="small"
@@ -42,21 +57,23 @@
 
 <script lang="ts" setup>
 import { computed, StyleValue } from "vue";
-import { OrigamBtn, OrigamIcon, OrigamProgress } from "../../components";
-import {
-  useDefaults,
-  useProps,
-  useStyle,
-  useTypography
-} from "../../composables";
-import { MDI_ICONS } from "../../enums";
-import { humanReadableFileSize } from "../../utils";
-const _props = defineProps({
+import OrigamBtn from "../Btn/OrigamBtn.vue";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import OrigamProgress from "../Progress/OrigamProgress.vue";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
+import { humanReadableFileSize } from "../../utils/Commons/commons.util";
+const props = defineProps({
   file: { type: null, required: true },
   index: { type: Number, required: true },
   progress: { type: Number, required: false },
   fileIcon: { type: String, required: false, default: MDI_ICONS.FILE },
   removeIcon: { type: String, required: false, default: MDI_ICONS.CLOSE },
+  downloadIcon: { type: String, required: false, default: MDI_ICONS.DOWNLOAD },
+  downloadable: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },
   showSize: { type: [Boolean, Number], required: false },
@@ -64,24 +81,33 @@ 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 },
-  fontFamily: { type: null, required: false },
   fontSize: { type: null, required: false },
-  fontWeight: { type: null, required: false },
-  lineHeight: { type: null, required: false },
-  letterSpacing: { type: null, required: false }
+  fontWeight: { type: null, required: false }
 });
-const props = useDefaults(_props);
-const emits = defineEmits(["click:remove"]);
+const emits = defineEmits(["click:remove", "click:download"]);
 defineSlots();
+const { t } = useLocale();
 const handleRemove = () => {
   emits("click:remove", { file: props.file, index: props.index });
 };
+const handleDownload = () => {
+  emits("click:download", { file: props.file, index: props.index });
+};
 const base = computed(() => {
   return typeof props.showSize !== "boolean" ? props.showSize : void 0;
 });
+const hasSize = computed(() => {
+  return props.showSize !== false;
+});
 const hasProgress = computed(() => {
   return typeof props.progress === "number";
 });
+const removeAriaLabel = computed(() => {
+  return t("origam.file_field.remove_aria_label", props.file.name);
+});
+const downloadAriaLabel = computed(() => {
+  return t("origam.file_field.download_aria_label", props.file.name);
+});
 const listItemStyles = computed(() => {
   return [
     props.style
@@ -95,7 +121,7 @@ const listItemClasses = computed(() => {
 });
 const { typographyStyles } = useTypography(props, "file-field-list-item__name");
 const { filterProps } = useProps(props);
-const { id, css, load, isLoaded, unload } = useStyle(listItemStyles);
+const { id, css, load, isLoaded, unload } = useStyle(listItemStyles, () => props.id);
 defineExpose({
   filterProps,
   css,

package/dist/src/components/Form/OrigamForm.vue

@@ -1,5 +1,6 @@
 <template>
 	<form
+			:id="id"
 			ref="formRef"
 			:class="formClasses"
 			:style="formStyles"
@@ -47,7 +48,7 @@
 		>
 			<slot
 					name="actions"
-					v-bind="{submit: () => handleSubmit, reset: () => handleReset}"
+					v-bind="{submit: handleSubmit, reset: handleReset}"
 			/>
 		</div>
 	</form>
@@ -55,18 +56,16 @@
 
 <script lang="ts" setup>
 import { computed, nextTick, ref, StyleValue, useSlots } from "vue";
-import { OrigamMessages } from "../../components";
-import {
-  useDefaults,
-  useForm,
-  useMessage,
-  useProps,
-  useStyle,
-  useTypography,
-  useValidation
-} from "../../composables";
-import { forwardRefs, getUid } from "../../utils";
-const _props = defineProps({
+import OrigamMessages from "../Messages/OrigamMessages.vue";
+import { useForm } from "../../composables/Form/form.composable";
+import { useMessage } from "../../composables/Commons/message.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import { useValidation } from "../../composables/Commons/validation.composable";
+import { forwardRefs } from "../../utils/Commons/forwardRefs.util";
+import { getUid } from "../../utils/Commons/getCurrentInstance.util";
+const props = defineProps({
   disabled: { type: Boolean, required: false },
   fastFail: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },
@@ -80,13 +79,11 @@ 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 },
-  fontFamily: { type: null, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
   lineHeight: { type: null, required: false },
   letterSpacing: { type: null, required: false }
 });
-const props = useDefaults(_props);
 const emits = defineEmits(["submit", "reset", "update:modelValue"]);
 defineSlots();
 const slots = useSlots();
@@ -114,6 +111,7 @@ const handleReset = (e) => {
   e.preventDefault();
   form.reset();
   resetFormValidation();
+  emits("reset", e);
 };
 const handleSubmit = (_e) => {
   const e = _e;
@@ -151,7 +149,7 @@ const formClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(formStyles);
+const { id, css, load, isLoaded, unload } = useStyle(formStyles, () => props.id);
 defineExpose(forwardRefs({
   filterProps,
   ...form,

package/dist/src/components/Grid/OrigamGrid.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			:class="gridClasses"
 			:style="gridStyles"
 	>
@@ -10,17 +11,15 @@
 
 <script lang="ts" setup>
 import { computed, StyleValue, toRef } from "vue";
-import {
-  useBorder,
-  useBothColor,
-  useDimension,
-  useElevation,
-  useMargin,
-  usePadding,
-  useProps,
-  useRounded
-} from "../../composables";
-import { GRID_GAP_SIZE_VAR } from "../../consts";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useElevation } from "../../composables/Commons/elevation.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { GRID_GAP_SIZE_VAR } from "../../consts/Grid/grid.const";
 const props = defineProps({
   columns: { type: [Number, String, Array], required: false, default: "auto" },
   rows: { type: [Number, String, Array], required: false, default: "auto" },
@@ -83,6 +82,7 @@ const props = defineProps({
   borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
 const { filterProps } = useProps(props);
+defineEmits([]);
 defineSlots();
 const serialiseTracks = (value) => {
   if (value == null) return void 0;

package/dist/src/components/Grid/OrigamGridItem.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			:class="itemClasses"
 			:style="itemStyles"
 	>
@@ -21,6 +22,7 @@ const props = defineProps({
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "div" }
 });
+defineEmits([]);
 defineSlots();
 const serialiseLineSpec = (value) => {
   if (value == null) return void 0;