@zeedhi/vuetify 3.0.9 → 3.0.11

package/src/components/zd-switch/ZdSwitch.vue

@@ -1,46 +1,42 @@
 <template>
-  <span
-    :id="instance.name"
-  >
-    <v-switch
-      ref="root"
-      v-show="instance.isVisible"
-      v-model="instance.displayValue"
-      validate-on="blur"
-      :name="instance.name"
-      :color="instance.color"
-      :inset="instance.inset"
-      :class="[
-        instance.cssClass,
-        'zd-switch',
-        {
-          'zd-no-helper': !instance.showHelper,
-          'zd-no-label': !instance.showLabel,
-          'zd-input-required': instance.validations.required,
-        },
-      ]"
-      :style="{
-        ...$styleObject(instance.cssStyle),
-        }"
-      :tabindex="instance.tabStop ? '' : '-1'"
-      @click="click($event)"
-      @mouseenter="mouseenter($event)"
-      @mouseleave="mouseleave($event)"
-      @focus="focus($event)"
-      @blur="blur($event)"
-      @update:model-value="switchChange($event)"
-      v-bind="{
-        theme: instance.theme,
-        disabled: instance.disabled,
-        label: instance.showLabel ? $t(instance.label) : undefined,
-        readonly: instance.readonly,
-        falseValue: instance.falseValue,
-        trueValue: instance.trueValue,
-        density: 'compact',
-        hideDetails: true
+  <v-switch
+    ref="root"
+    v-show="instance.isVisible"
+    v-model="instance.displayValue"
+    validate-on="blur"
+    :name="instance.name"
+    :color="instance.color"
+    :inset="instance.inset"
+    :class="[
+      instance.cssClass,
+      'zd-switch',
+      {
+        'zd-no-helper': !instance.showHelper,
+        'zd-no-label': !instance.showLabel,
+        'zd-input-required': instance.validations.required,
+      },
+    ]"
+    :style="{
+      ...$styleObject(instance.cssStyle),
       }"
-    ></v-switch>
-  </span>
+    :tabindex="instance.tabStop ? '' : '-1'"
+    @click="click($event)"
+    @mouseenter="mouseenter($event)"
+    @mouseleave="mouseleave($event)"
+    @focus="focus($event)"
+    @blur="blur($event)"
+    @update:model-value="switchChange($event)"
+    v-bind="{
+      theme: instance.theme,
+      disabled: instance.disabled,
+      label: instance.showLabel ? $t(instance.label) : undefined,
+      readonly: instance.readonly,
+      falseValue: instance.falseValue,
+      trueValue: instance.trueValue,
+      density: 'compact',
+      hideDetails: true
+    }"
+  ></v-switch>
 </template>
 <script lang="ts" src="./ZdSwitch.ts"></script>
 
@@ -49,6 +45,10 @@
   margin: 0;
   padding: 3px 0 0 8px;
 
+  &.v-input {
+    height: fit-content;
+  }
+
   .v-label {
     font-weight: var(--zd-font-body1-weight);
     color: var(--zd-font-color);

package/src/components/zd-table/ZdTable.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="root"
     class="zd-table-container"
     :style="{
       height: $formatSize(instance.height),

package/src/components/zd-tabs/ZdTab.ts

@@ -12,9 +12,6 @@ export const ZdTabProps = buildProps({
 		type: [Boolean, String],
 		default: false,
 	},
-	index: {
-		type: [Number, String],
-	},
 	tabTitle: {
 		type: [String],
 	},

package/src/components/zd-tabs/ZdTab.vue

@@ -1,11 +1,11 @@
 <template>
   <v-tab
     :id="instance.name"
+    ref="root"
     v-show="instance.isVisible"
     :class="['zd-tabs-tab', instance.cssClass]"
     :style="$styleObject(instance.cssStyle)"
     :name="instance.tabName"
-    :key="instance.index"
     :disabled="instance.disabled"
     :theme="instance.theme"
     :color="instance.color"
@@ -29,7 +29,7 @@
 
 <script lang="ts" src="./ZdTab.ts"></script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .zd-tabs {
   &-tab,
   &-tab:before {

package/src/components/zd-tabs/ZdTabItem.vue

@@ -1,25 +1,26 @@
 <template>
-    <v-window-item
+    <v-tabs-window-item
       class="zd-tabs-tab-item"
       v-show="isVisible"
       :value="index"
     >
       <v-container fluid>
-        <component
-          v-for="(child, index) in children"
-          v-bind="child"
-          :key="index"
-          :is="child.component"
-        >
-        </component>
-        <slot></slot>
+        <slot>
+          <component
+            v-for="(child) in children"
+            v-bind="child"
+            :key="child.name"
+            :is="child.component"
+          >
+          </component>
+        </slot>
       </v-container>
-    </v-window-item>
+    </v-tabs-window-item>
 </template>
 
 <script lang="ts" src="./ZdTabItem.ts"></script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .zd-tabs {
   &-tab-item {
     transition: none;

package/src/components/zd-tabs/ZdTabs.vue

@@ -25,28 +25,12 @@
       :max="instance.max"
     >
       <zd-tab
-        v-for="(tab, index) in instance.tabs " :key="index"
+        v-for="(tab, index) in instance.tabs " :key="tab.name"
         v-bind="{
-          key: index,
-          name: instance.name+'-tab-'+index,
-          disabled: tab.disabled,
-          cssClass: tab.cssClass,
-          cssStyle: tab.cssStyle,
+          ...tab,
+          name: tab.name,
           tabName: tab.name,
-          index: index,
-          isVisible: tab.isVisible,
-          tabTitle: tab.tabTitle,
-          theme: tab.theme,
-          color: tab.color,
           dense: tab.dense || instance.dense,
-          direction: tab.direction,
-          fixed: tab.fixed,
-          iconName: tab.iconName,
-          rounded: tab.rounded,
-          selectedClass: tab.selectedClass,
-          value: tab.value,
-          variant:tab.variant,
-          width: tab.width,
         }"
         @click="clickTab($event, index)"
         @keydown="keydown($event, index)"
@@ -60,7 +44,7 @@
         <zd-tab-item
           v-for="(tab, index) in instance.tabs"
           v-show="tab.isVisible && index === instance.activeTab"
-          :key="index"
+          :key="tab.name"
           :value="index"
           :children ="tab.children"
           v-bind ="{
@@ -77,7 +61,7 @@
 
 <script lang="ts" src="./ZdTabs.ts"></script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .zd-tabs {
   display: flex;
   flex-direction: column;

package/src/components/zd-text/ZdText.ts

@@ -1,10 +1,11 @@
 import { Text } from '@zeedhi/common';
 import { defineComponent } from 'vue';
 import { buildProps } from '../../utils';
-import { ZdComponentProps, useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
 
 export const ZdTextProps = buildProps({
-	...ZdComponentProps,
+	...ZdComponentRenderProps,
 	compile: {
 		type: [Boolean, String],
 		default: false,

package/src/components/zd-time/ZdTime.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     :id="instance.name"
+    ref="root"
     class="zd-time"
   >
     <component

package/src/components/zd-tooltip/ZdTooltip.vue

@@ -15,8 +15,8 @@
   >
     <template v-slot:activator="{ props }">
       <zd-activator-wrapper
-        v-for="(child, index) in instance.children"
-        :key="index"
+        v-for="(child) in instance.children"
+        :key="child.name"
         v-bind="mergeProps(props, $attrs)"
         :child-props="child"
         :parent="instance.parent"

package/src/components/zd-tree/ZdTree.vue

@@ -2,6 +2,7 @@
   <div
     :id="instance.name"
     v-show="instance.isVisible"
+    ref="root"
     :class="[
       instance.cssClass, 'zd-tree', 
       theme,
@@ -21,8 +22,8 @@
   >
     <div v-if="instance.toolbarSlot.length && !$slots.toolbarSlot" class="zd-mb-4 zd-tree-toolbar">
       <component
-        v-for="(child, index) in instance.toolbarSlot"
-        :key="index"
+        v-for="(child) in instance.toolbarSlot"
+        :key="child.name"
         :is="child.component"
         :parent="instance"
         v-bind="child"
@@ -85,12 +86,12 @@
               </span>
               <span v-else class='zd-display-inline-flex'>
                 <component
-                  v-for="(comp, index) in instance.getSlotComponent(instance.titleSlot, node)"
+                  v-for="(comp) in instance.getSlotComponent(instance.titleSlot, node)"
                   :class="[
                     'item-title', 
                     { 'has-children': node.children.length }
                   ]"
-                  :key="index"
+                  :key="comp.name"
                   :is="comp.component"
                   v-bind="comp"
                 />
@@ -117,7 +118,7 @@
 <script lang="ts" src="./ZdTree.ts"></script>
 
 <style lang="scss">
-@import 'sl-vue-tree-next/sl-vue-tree-next-minimal.css';
+@use 'sl-vue-tree-next/sl-vue-tree-next-minimal.css';
 
 .zd-tree {
   color: var(--zd-font-color);

package/src/composables/index.ts

@@ -13,4 +13,6 @@ export * from './maska';
 export * from './tableNavigation';
 export * from './virtualScroll';
 export * from './watchUrl';
+export * from './usePickerValue';
 export * from './useIsMobile';
+export * from './useDateKeydown';

package/src/composables/useDateKeydown.ts

@@ -0,0 +1,195 @@
+import { DateInput, DateRange } from '@zeedhi/common';
+import { Mask } from '@zeedhi/core';
+import { UnwrapNestedRefs, computed, onMounted, ref } from 'vue';
+
+const isPrintableKey = (key: string) => key.length === 1;
+const keyAllowed = (key: string) =>
+  ['Tab', 'ArrowLeft', 'ArrowRight', 'Delete', 'Backspace'].includes(key);
+
+export function useDateKeydown(
+  instance: UnwrapNestedRefs<DateRange | DateInput>,
+) {
+  const PLACEHOLDER_CHAR = ' ';
+
+  const hasPlaceholder = computed(() => placeholderLocations.value.length > 0);
+
+  const placeholderLocations = ref<number[]>([]);
+
+  const keydown = (event?: KeyboardEvent) => {
+    if (!event) return;
+
+    const inputEl = event.target as HTMLInputElement;
+    const { key } = event;
+    const { value, selectionEnd: end } = inputEl;
+    
+    // We need 'start' to be mutable for the backspace loop, 
+    // but we verify it is not null first.
+    let start = inputEl.selectionStart;
+
+    if (start === null || end === null) return;
+
+    // 1. VALIDATION GUARD CLAUSE
+    // Block invalid keys immediately.
+    const isNumber = /[0-9]/.test(key);
+    const isAllowedKey = keyAllowed(key);
+
+    if (!isNumber && !isAllowedKey) {
+      event.preventDefault();
+      return;
+    }
+
+    // Define logic states for readability
+    const isBackspace = key === 'Backspace';
+    const isDelete = key === 'Delete';
+    const isDeletionAction = isBackspace || isDelete;
+    const hasSelection = start !== end;
+    const isFullSelection = start === 0 && end === value.length;
+
+    // Logic: Skip delimiters backwards, clear the number slot, move cursor back.
+    if (isBackspace && !hasSelection && start > 0) {
+      event.preventDefault();
+
+      // Skip back over delimiters (e.g., hyphens)
+      while (Mask.isMaskDelimiter(value[start - 1]) && value[start - 1] !== PLACEHOLDER_CHAR) {
+        start -= 1;
+      }
+
+      // Replace char with placeholder (maintain mask structure)
+      const firstSlice = value.slice(0, start - 1);
+      const secondSlice = value.substring(start);
+      const placeholderLocation = firstSlice.length;
+      const newValue = `${firstSlice}${PLACEHOLDER_CHAR}${secondSlice}`;
+      inputEl.value = newValue;
+
+      // Move cursor back
+      inputEl.selectionStart = start - 1;
+      inputEl.selectionEnd = start - 1;
+
+      // Check if input is effectively empty
+      if (Mask.getValueWithoutMask(inputEl.value) === '') {
+        instance.displayValue = '';
+        placeholderLocations.value = [];
+      } else {
+        placeholderLocations.value.push(placeholderLocation);
+      }
+
+      return;
+    }
+
+    // FULL CLEAR (Select All + Delete/Backspace)
+    // Reset the entire display.
+    if (isDeletionAction && isFullSelection) {
+      event.preventDefault();
+      instance.displayValue = '';
+      placeholderLocations.value = [];
+      return;
+    }
+
+    // PARTIAL DELETION (Selection or 'Delete' key)
+    // Replace selected numbers with spaces (maintain mask structure).
+    if (isDeletionAction) {
+      event.preventDefault(); // Prevent text shifting
+      
+      // Determine range: if no selection, 'Delete' key targets the next char
+      // (Note: The original code implies logic for 'Delete' with no selection covers this)
+      const indexesToReplace = findNumberIndices(value);
+      const indexesBetweenSelection = indexesToReplace.filter((index) => (index >= (start || 0) && index < end));
+      inputEl.value = replaceAt(value, indexesBetweenSelection);
+      
+      inputEl.selectionStart = start;
+      inputEl.selectionEnd = start;
+
+      placeholderLocations.value.push(...indexesBetweenSelection);
+      return;
+    }
+
+    // TYPING / OVERWRITE (Default behavior for valid keys)
+    // Remove the character ahead of the cursor to simulate "Overwrite" mode,
+    // then let the browser insert the new key naturally.
+    if (!isPrintableKey(key) || Mask.isMaskDelimiter(key)) {
+      return;
+    }
+
+    // Skip forward over delimiters so we don't overwrite them
+    while (Mask.isMaskDelimiter(value[start]) && !placeholderLocations.value.includes(start)) {
+      start += 1;
+    }
+
+    // Prepare the string: Remove the char at the current cursor position
+    const firstSlice = value.substring(0, start);
+    const secondSlice = value.substring(start + 1);
+
+    const testValue = firstSlice + event.key + secondSlice;
+    const mask = instance.getMask();
+    // When there is still some placeholder in the string
+    // should manually add the new char, preventing maska processing
+    if (hasPlaceholder.value && !Mask.checkMask(testValue, mask)) {
+      event.preventDefault();
+
+      inputEl.value = testValue;
+
+      // Manually advance the cursor
+      const newCursorPos = start + 1;
+      inputEl.selectionStart = newCursorPos;
+      inputEl.selectionEnd = newCursorPos;
+      return;
+    }
+
+    placeholderLocations.value = [];
+
+    inputEl.value = firstSlice + secondSlice;
+
+    // Position cursor for the incoming key press
+    inputEl.selectionStart = start;
+    inputEl.selectionEnd = start;
+    
+    // We cleared the slot, now we let the browser insert the pressed number key.
+  };
+
+  const findNumberIndices = (str: string) => {
+    const regex = /[0-9]/g;
+    const matches = [...str.matchAll(regex)];
+    
+    return matches.filter(match => (match.index !== undefined)).map(match => (match.index!));
+  }
+
+  /**
+   * Replaces the characters at specified positions
+   * @param str String to be replaced
+   * @param indexes array of indexes where the characters will be replaced
+   * @returns resulting string
+   */
+  const replaceAt = (str: string, indexes: number[]) => {
+    return str.split('').map((char, i) => {
+      if (indexes.includes(i)) {
+        return PLACEHOLDER_CHAR;
+      }
+      return char;
+    }).join('');
+  }
+
+  onMounted(() => {
+    const keydownEvent = instance.events.keydown;
+    const keydownEvents = Array.isArray(keydownEvent)
+      ? keydownEvent
+      : [keydownEvent];
+
+    const handler = (payload: any) => {
+      const event = payload?.event || payload;
+      keydown(event);
+    };
+
+    const handlerExists = keydownEvents.some(
+      (existingHandler: any) => 
+        existingHandler && 
+        existingHandler.toString() === handler.toString()
+    );
+
+    if (!handlerExists) {
+      keydownEvents.push(handler);
+    }
+
+    const filtered = keydownEvents.filter(Boolean);
+    instance.events.keydown = filtered.length === 1 ? filtered[0] : filtered as any;
+  });
+}

package/src/composables/usePickerValue.ts

@@ -0,0 +1,22 @@
+import { DateInput, DateRange } from '@zeedhi/common';
+import { UnwrapNestedRefs, computed } from 'vue';
+
+/**
+ * Composable to create a computed property to be used as a v-model for a date picker.
+ * It acts as a bridge between the date picker and the component's `getNativeDate` and `setNativeDate` methods.
+ * @param instance The instance of the date component (e.g., DateInput, DateRange).
+ */
+export function usePickerValue(instance: UnwrapNestedRefs<DateInput | DateRange>) {
+	const pickerValue = computed({
+		get: () => {
+			return instance.getNativeDate();
+		},
+		set: (value: any) => {
+			instance.setNativeDate(value);
+		},
+	});
+
+	return {
+		pickerValue,
+	};
+}

package/src/index.ts

@@ -6,7 +6,6 @@ import { PrismEditor } from 'vue-prism-editor';
 import { DisplayBreakpoint, DisplayThresholds, IconOptions, createVuetify } from 'vuetify';
 import * as components from 'vuetify/components';
 import * as directives from 'vuetify/directives';
-import * as labs from 'vuetify/labs/components';
 import 'vuetify/styles';
 import { SlVueTreeNext } from 'sl-vue-tree-next';
 import { RegisterComponents } from './components';
@@ -29,7 +28,6 @@ const ZeedhiVuetify = {
 		const vuetify = createVuetify({
 			components: {
 				...components,
-				...labs,
 			},
 			directives,
 			theme: initTheme(theme),

package/src/styles/_zd-input.scss

@@ -29,6 +29,8 @@
   }
 
   &.v-input {
+    height: fit-content;
+
     .v-input__control {
       >.v-field {
         .v-select__slot {

package/src/styles/index.scss

@@ -1,5 +1,5 @@
-@import 'moon-design-system';
-@import 'zd-input';
+@use 'moon-design-system';
+@use 'zd-input';
 
 * {
   letter-spacing: unset !important;

package/src/utils/logger/logger.ts

@@ -1,6 +1,8 @@
+import { Config } from '@zeedhi/core';
+
 export class Logger {
 	static warn(...args: any[]) {
-		if (process.env.NODE_ENV === 'development') {
+		if (Config.mode === 'development') {
 			console.warn('[Zeedhi Vue warn]:', ...args);
 		}
 	}

package/src/utils/mergeDictionaries.ts

@@ -5,7 +5,7 @@ const mergeDictionaries = (dictArray: Record<string, any[]>[]): Result => {
 
 	dictArray.forEach((dict) => {
 		for (const key in dict) {
-			if (Object.prototype.hasOwnProperty.call(dict, key)) {
+			if (Object.hasOwn(dict, key)) {
 				// Initialize array if key doesn't exist
 				if (!result[key]) {
 					result[key] = [];

package/src/utils/plugins/getIconPlugin.ts

@@ -1,12 +1,29 @@
 import { Icons } from '@zeedhi/common';
-import camelcase from 'lodash.camelcase';
-import kebabcase from 'lodash.kebabcase';
 
 export default function getIconPlugin(name?: string) {
 	if (!name) return '';
 
-	const camelizedName = camelcase(name);
-	const kebabName = kebabcase(name);
+	/**
+	 * Converte uma string para kebab-case (ex: "HelloWorld" -> "hello-world")
+	 */
+	const toKebabCase = (str: string) => {
+		return str
+			.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)!
+			.map(x => x.toLowerCase())
+			.join('-');
+	};
+
+	/**
+	 * Converte uma string para camelCase (ex: "hello-world" -> "helloWorld")
+	 */
+	const toCamelCase = (str: string) => {
+		return str
+			.toLowerCase()
+			.replace(/[^a-zA-Z0-9]+(.)/g, (_m, chr) => chr.toUpperCase());
+	};
+
+	const camelizedName = toCamelCase(name);
+	const kebabName = toKebabCase(name);
 	const icons = Icons.getIcons();
 	return icons[kebabName] || icons[camelizedName] || name;
 }