@mozaic-ds/vue 2.14.0 → 2.16.0

package/src/components/textinput/MTextInput.vue

@@ -7,6 +7,7 @@
     <span v-if="prefix" class="mc-text-input__addon">{{ prefix }}</span>
 
     <input
+      ref="textInput"
       :id="id"
       class="mc-text-input__control"
       :value="modelValue"
@@ -41,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, type VNode } from 'vue';
+import { computed, useTemplateRef, type VNode } from 'vue';
 import { CrossCircleFilled24 } from '@mozaic-ds/icons-vue';
 
 /**
@@ -130,6 +131,8 @@ const classObject = computed(() => {
   };
 });
 
+const textInput = useTemplateRef('textInput');
+
 const clearValue = () => {
   emit('update:modelValue', '');
 };
@@ -141,9 +144,18 @@ const emit = defineEmits<{
   (on: 'update:modelValue', value: string | number): void;
 }>();
 
+function focus() {
+  console.log(textInput.value);
+  textInput.value?.focus();
+}
+
 defineOptions({
   inheritAttrs: false,
 });
+
+defineExpose({
+  focus,
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/textinput/README.md

@@ -11,7 +11,7 @@ A text input is a single-line input that allows users to enter and edit short te
 | `name` | The name attribute for the input element, typically used for form submission. | `string` | - |
 | `modelValue` | The current value of the input field. | `string` `number` | - |
 | `placeholder` | A placeholder text to show in the input when it is empty. | `string` | - |
-| `inputType` | Defines the type of input. | `"number"` `"text"` `"search"` `"date"` `"email"` `"password"` `"tel"` | `"text"` |
+| `inputType` | Defines the type of input. | `"number"` `"search"` `"text"` `"date"` `"email"` `"password"` `"tel"` | `"text"` |
 | `isInvalid` | If `true`, applies an invalid state to the input. | `boolean` | - |
 | `disabled` | If `true`, disables the input, making it non-interactive. | `boolean` | - |
 | `size` | Determines the size of the input. | `"s"` `"m"` | `"m"` |
@@ -32,3 +32,17 @@ A text input is a single-line input that allows users to enter and edit short te
 | Name | Description | Type |
 | --- | --- | --- |
 | `update:modelValue` | Emits when the input value changes, updating the `modelValue` prop. | [value: string | number] |
+
+## Dependencies
+
+### Used By
+
+- [MOptionListbox](../optionListbox)
+
+### Graph
+
+```mermaid
+graph TD;
+  MOptionListbox --> MTextInput
+style MTextInput fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/tileclickable/README.md

@@ -14,7 +14,7 @@ Used to navigate to a full URL. | `string` | - |
 | `to` | If set, the tile becomes an internal link (Vue Router route).
 Used for navigation within the app. | `string` | - |
 | `target` | Where to open the link. | `"_self"` `"_blank"` `"_parent"` `"_top"` | - |
-| `iconPosition` | Position of the icon relative to the content. | `"right"` `"bottom"` | `"right"` |
+| `iconPosition` | Position of the icon relative to the content. | `"bottom"` `"right"` | `"right"` |
 
 ## Slots
 

package/src/main.ts

@@ -12,6 +12,7 @@ export { default as MCheckbox } from './components/checkbox/MCheckbox.vue';
 export { default as MCheckboxGroup } from './components/checkboxgroup/MCheckboxGroup.vue';
 export { default as MCheckListMenu } from './components/checklistmenu/MCheckListMenu.vue';
 export { default as MCircularProgressbar } from './components/circularprogressbar/MCircularProgressbar.vue';
+export { default as MCombobox } from './components/combobox/MCombobox.vue';
 export { default as MContainer } from './components/container/MContainer.vue';
 export { default as MDatepicker } from './components/datepicker/MDatepicker.vue';
 export { default as MDivider } from './components/divider/MDivider.vue';
@@ -19,6 +20,7 @@ export { default as MDrawer } from './components/drawer/MDrawer.vue';
 export { default as MField } from './components/field/MField.vue';
 export { default as MFieldGroup } from './components/fieldgroup/MFieldGroup.vue';
 export { default as MFileUploader } from './components/fileuploader/MFileUploader.vue';
+export { default as MFileUploaderItem } from './components/fileuploaderitem/MFileUploaderItem.vue';
 export { default as MFlag } from './components/flag/MFlag.vue';
 export { default as MIconButton } from './components/iconbutton/MIconButton.vue';
 export { default as MKpiItem } from './components/kpiitem/MKpiItem.vue';
@@ -43,6 +45,12 @@ export { default as MRadioGroup } from './components/radiogroup/MRadioGroup.vue'
 export { default as MSegmentedControl } from './components/segmentedcontrol/MSegmentedControl.vue';
 export { default as MSelect } from './components/select/MSelect.vue';
 export { default as MSidebar } from './components/sidebar/MSidebar.vue';
+export { default as MSidebarExpandableItem } from './components/sidebarexpandableitem/MSidebarExpandableItem.vue';
+export { default as MSidebarFooter } from './components/sidebarfooter/MSidebarFooter.vue';
+export { default as MSidebarHeader } from './components/sidebarheader/MSidebarHeader.vue';
+export { default as MSidebarNavItem } from './components/sidebarnavitem/MSidebarNavItem.vue';
+export { default as MSidebarShortcutItem } from './components/sidebarshortcutitem/MSidebarShortcutItem.vue';
+export { default as MSidebarShortcuts } from './components/sidebarshortcuts/MSidebarShortcuts.vue';
 export { default as MStarRating } from './components/starrating/MStarRating.vue';
 export { default as MStatusBadge } from './components/statusbadge/MStatusBadge.vue';
 export { default as MStatusDot } from './components/statusdot/MStatusDot.vue';
@@ -53,12 +61,12 @@ export { default as MStepperCompact } from './components/steppercompact/MStepper
 export { default as MStepperInline } from './components/stepperinline/MStepperInline.vue';
 export { default as MTabs } from './components/tabs/MTabs.vue';
 export { default as MTag } from './components/tag/MTag.vue';
+export { default as MTextArea } from './components/textarea/MTextArea.vue';
+export { default as MTextInput } from './components/textinput/MTextInput.vue';
 export { default as MTile } from './components/tile/MTile.vue';
 export { default as MTileClickable } from './components/tileclickable/MTileClickable.vue';
 export { default as MTileExpandable } from './components/tileexpandable/MTileExpandable.vue';
 export { default as MTileSelectable } from './components/tileselectable/MTileSelectable.vue';
-export { default as MTextArea } from './components/textarea/MTextArea.vue';
-export { default as MTextInput } from './components/textinput/MTextInput.vue';
 export { default as MToaster } from './components/toaster/MToaster.vue';
 export { default as MToggle } from './components/toggle/MToggle.vue';
 export { default as MToggleGroup } from './components/togglegroup/MToggleGroup.vue';