@teammodlr/ui-kit 2.0.4 → 2.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teammodlr/ui-kit",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "",
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",

package/src/components/colorpicker/ColorPicker.vue

@@ -96,16 +96,17 @@
 </template>
 
 <script lang="ts">
-import {onClickOutside, useMouseInElement, useMousePressed} from '@vueuse/core';
+import {onClickOutside, useEyeDropper, useMouseInElement, useMousePressed} from '@vueuse/core';
 import {computed, defineComponent, onMounted, type PropType, reactive, ref, toRef, watch} from "vue";
 import * as style from './style';
 import {hexToRGB, type HSV, HSVToRGBA, HueToRGBA, RGBAToHex, RGBToHSV} from './utils';
 import {usePopper} from "../../composables/usePopper";
 import type {Placement} from "@popperjs/core";
 import {useZIndex} from "../../composables/useZIndex";
-import {MButton, MInput} from "../../components";
 import MSlider from "../../components/slider/Slider.vue";
-import { useEyeDropper } from '@vueuse/core'
+import MButton from "../../components/button/Button.vue";
+import MInput from "../../components/input/Input.vue";
+
 export default defineComponent({
     name: "MColorPicker",
     props: {

package/src/components/form/examples/basic.vue

@@ -50,7 +50,7 @@ const rules = {
 }
 
 const options = Array.from({ length: 50 }, (_, i) => ({
-    id: i+1,
+    id: i + 1,
     name: `Option ${i+1}`
 }));
 

package/src/components/radio/Radio.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts">
-import {defineComponent, toRef, ref, type PropType, watch, computed} from 'vue';
+import {defineComponent, toRef, ref, type PropType, watch, computed, defineExpose } from 'vue';
 import {useInput} from '../../composables/useInput';
 import {useInteractive} from "../../composables/useInteractive";
 import type {Size} from '../../types/props';

package/src/components/radiobutton/RadioButton.vue

@@ -9,7 +9,7 @@
 
 <script lang="ts">
 import type {PropType} from "vue";
-import {computed, defineComponent, inject, ref} from "vue";
+import {computed, defineComponent, inject, ref,defineExpose } from "vue";
 import type {Size} from "../../types/props";
 import * as style from "./style";
 import {useInteractive} from "../../composables/useInteractive";
@@ -128,4 +128,4 @@ export default defineComponent({
         }
     }
 })
-</script>
+</script>

package/src/components/table/Table.vue

@@ -18,6 +18,7 @@
             <TableBody>
                 <TableRow
                     v-for="(item, index) in items"
+                    v-if="items.length > 0"
                     :key="index"
                 >
                     <TableCell
@@ -31,6 +32,9 @@
                         </slot>
                     </TableCell>
                 </TableRow>
+                <tr :colspan="headers.length" v-if="items.length === 0">
+                    <slot name="empty" />
+                </tr>
             </TableBody>
         </table>
     </div>

package/src/components/table/examples/basic.vue

@@ -12,6 +12,10 @@
                 Edit - {{ item.name }}
             </MButton>
         </template>
+
+        <template #empty>
+            Nothing here
+        </template>
     </MTable>
 </template>
 

package/src/components/table/examples/empty.vue

@@ -0,0 +1,44 @@
+<template>
+    <MTable 
+        :headers="headers"
+        :items="items"
+    >
+        <template #actions="{ item }">
+            <MButton
+                color="blue"
+                secondary
+                size="sm"
+            >
+                Edit - {{ item.name }}
+            </MButton>
+        </template>
+
+        <template #empty>
+            Nothing here
+        </template>
+    </MTable>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type { TableHeadItem } from "../types";
+
+let headers = ref<TableHeadItem[]>([
+    {
+        name: "Name",
+        key: "name",
+        width: 200
+    },
+    {
+        name: "Age",
+        key: "age",
+    },
+    {
+        name: "Actions",
+        key: "actions",
+        align: "right"
+    }
+]);
+
+let items = ref([]);
+</script>

package/src/components/table/examples/index.stories.ts

@@ -1,7 +1,7 @@
 import MTable from "../Table.vue";
 import MButton from "../../button/Button.vue";
 import {
-    MTableBasic
+    MTableBasic, MTableEmpty
 } from "./index";
 
 import {
@@ -17,3 +17,4 @@ export default {
 }
 
 export const Basic = createStory(MTableBasic);
+export const Empty = createStory(MTableEmpty);

package/src/components/table/examples/index.ts

@@ -1 +1,2 @@
 export { default as MTableBasic } from './basic.vue';
+export { default as MTableEmpty } from './empty.vue';

package/src/composables/useInput.ts

@@ -104,9 +104,9 @@ export const useInput = (props: any, { focus, emit, withListeners = true }: {
         validate,
         setError,
         //@ts-ignore
-        formDisabled: form.disabled.value,
+        formDisabled: form?.disabled.value || false,
         //@ts-ignore
-        formLoading: form.loading.value
+        formLoading: form?.loading.value || false,
     }
 };
 

package/src/examples/cards/cards.stories.ts

@@ -1,9 +1,9 @@
 import Sidebar from "./sidebar.vue";
-import {createStory} from "../../../__storybook__";
+import {createStory} from "../../__storybook__";
 
 export default {
     component: Sidebar,
     title: 'Examples/Cards/Sidebar'
 }
 
-export const Basic = createStory(Sidebar);
+export const Basic = createStory(Sidebar);