@amirjalili1374/ui-kit 1.2.0

package/src/components/shared/DescriptionInput.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="description-input">
+    <v-textarea
+      v-model="internalValue"
+      :label="label"
+      :placeholder="placeholder"
+      :rows="rows"
+      :maxlength="maxlength"
+      :disabled="disabled"
+      :readonly="readonly"
+      :clearable="clearable"
+      :counter="showCounter || undefined"
+      variant="outlined"
+      density="comfortable"
+      auto-grow
+      @keydown="handleKeydown"
+      @input="handleInput"
+      @blur="handleBlur"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+interface Props {
+  modelValue?: string;
+  label?: string;
+  placeholder?: string;
+  rows?: number;
+  maxlength?: number;
+  disabled?: boolean;
+  readonly?: boolean;
+  clearable?: boolean;
+  showCounter?: boolean;
+  autoNumbering?: boolean; // Enable/disable auto numbering
+  startNumber?: number; // Starting number for auto numbering
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  label: 'توضیحات',
+  placeholder: 'توضیحات خود را وارد کنید...',
+  rows: 4,
+  maxlength: 1000,
+  disabled: false,
+  readonly: false,
+  clearable: true,
+  showCounter: true,
+  autoNumbering: true,
+  startNumber: 1
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+  (e: 'change', value: string): void;
+}>();
+
+const internalValue = ref(props.modelValue);
+
+// Watch for external modelValue changes
+watch(() => props.modelValue, (newValue) => {
+  internalValue.value = newValue;
+});
+
+// Watch for internal value changes and emit
+watch(internalValue, (newValue) => {
+  emit('update:modelValue', newValue);
+});
+
+// Handle keydown events for auto numbering
+const handleKeydown = (event: KeyboardEvent) => {
+  if (!props.autoNumbering || props.disabled || props.readonly) {
+    return;
+  }
+
+  const target = event.target as HTMLTextAreaElement;
+  const { key, ctrlKey, shiftKey, altKey } = event;
+
+  // Handle Enter key (new line with incrementing number)
+  if (key === 'Enter' && !ctrlKey && !shiftKey && !altKey) {
+    event.preventDefault();
+    insertNumberedLine(target, true);
+  }
+  
+  // Handle Inter key (new line with decrementing number)
+  if (key === 'Inter' || (key === 'Enter' && shiftKey)) {
+    event.preventDefault();
+    insertNumberedLine(target, false);
+  }
+};
+
+// Insert a numbered line
+const insertNumberedLine = (textarea: HTMLTextAreaElement, increment: boolean) => {
+  const { selectionStart, selectionEnd, value } = textarea;
+  
+  // Get current line number
+  const currentLineNumber = getCurrentLineNumber(value, selectionStart);
+  
+  // Calculate new line number
+  const newLineNumber = increment ? currentLineNumber + 1 : Math.max(1, currentLineNumber - 1);
+  
+  // Create the new line text
+  const newLineText = `\n${newLineNumber} - `;
+  
+  // Insert the new line
+  const newValue = value.slice(0, selectionStart) + newLineText + value.slice(selectionEnd);
+  internalValue.value = newValue;
+  
+  // Set cursor position after the new line
+  const newCursorPosition = selectionStart + newLineText.length;
+  
+  // Use nextTick to ensure DOM is updated
+  setTimeout(() => {
+    textarea.setSelectionRange(newCursorPosition, newCursorPosition);
+    textarea.focus();
+  }, 0);
+};
+
+// Get the current line number from the text
+const getCurrentLineNumber = (text: string, cursorPosition: number): number => {
+  // Find the current line
+  const lines = text.split('\n');
+  let currentPos = 0;
+  
+  for (let i = 0; i < lines.length; i++) {
+    const lineLength = lines[i].length + 1; // +1 for newline
+    
+    if (currentPos + lineLength > cursorPosition) {
+      // We found the current line
+      const line = lines[i];
+      
+      // Check if line starts with a number pattern (e.g., "1 - ", "2 - ", etc.)
+      const numberMatch = line.match(/^(\d+)\s*-\s*/);
+      if (numberMatch) {
+        return parseInt(numberMatch[1]);
+      }
+      
+      // If no number found, return the line index + startNumber
+      return props.startNumber + i;
+    }
+    
+    currentPos += lineLength;
+  }
+  
+  // If we're at the end, return the next number
+  return props.startNumber + lines.length;
+};
+
+// Handle input changes
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLTextAreaElement;
+  const value = target.value;
+  
+  // Auto-format existing text to add numbering if needed
+  if (props.autoNumbering && value && !value.match(/^\d+\s*-\s/)) {
+    const formattedValue = formatTextWithNumbering(value);
+    if (formattedValue !== value) {
+      internalValue.value = formattedValue;
+    }
+  }
+};
+
+// Format text to add numbering
+const formatTextWithNumbering = (text: string): string => {
+  const lines = text.split('\n');
+  const formattedLines = lines.map((line, index) => {
+    // Skip empty lines
+    if (!line.trim()) {
+      return line;
+    }
+    
+    // If line already has numbering, keep it
+    if (line.match(/^\d+\s*-\s/)) {
+      return line;
+    }
+    
+    // Add numbering
+    return `${props.startNumber + index} - ${line}`;
+  });
+  
+  return formattedLines.join('\n');
+};
+
+// Handle blur event
+const handleBlur = () => {
+  emit('change', internalValue.value);
+};
+</script>
+
+<style scoped>
+.description-input {
+  width: 100%;
+}
+
+.description-input :deep(.v-textarea textarea) {
+  font-family: 'Vazir', 'Tahoma', sans-serif;
+  line-height: 1.6;
+}
+
+.description-input :deep(.v-textarea textarea:focus) {
+  outline: none;
+}
+</style>

package/src/components/shared/DownloadButton.vue

@@ -0,0 +1,169 @@
+<template>
+  <v-btn
+    v-bind="$attrs"
+    :loading="loading"
+    @click="handleDownload"
+    class="download-button"
+  >
+    <v-icon v-if="icon" :start="iconStart" :end="iconEnd" :class="iconClass">{{ icon }}</v-icon>
+    <span class="download-title">{{ title }}</span>
+    <v-icon v-if="!icon" start :icon="icons.download" :class="iconClass"></v-icon>
+  </v-btn>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { icons } from '@/plugins/mdi-icon'
+
+interface Props {
+  url: string
+  title?: string
+  icon?: string
+  iconStart?: boolean
+  iconEnd?: boolean
+  filename?: string
+  method?: 'anchor' | 'fetch'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: 'دانلود',
+  iconStart: true,
+  iconEnd: false,
+  method: 'anchor'
+})
+
+const emit = defineEmits<{
+  download: [url: string]
+  error: [error: Error]
+  success: [filename: string]
+}>()
+
+const loading = ref(false)
+
+// Computed class for icon positioning
+const iconClass = computed(() => {
+  if (props.iconStart) return 'icon-start'
+  if (props.iconEnd) return 'icon-end'
+  return ''
+})
+
+const handleDownload = async () => {
+  if (!props.url) {
+    const error = new Error('URL is required for download')
+    emit('error', error)
+    return
+  }
+
+  loading.value = true
+  
+  try {
+    if (props.method === 'fetch') {
+      await downloadWithFetch()
+    } else {
+      await downloadWithAnchor()
+    }
+  } catch (error) {
+    console.error('Download failed:', error)
+    emit('error', error as Error)
+  } finally {
+    loading.value = false
+  }
+}
+
+const downloadWithAnchor = async () => {
+  // Create a temporary anchor element to trigger download
+  const link = document.createElement('a')
+  link.href = props.url
+  link.download = props.filename || ''
+  link.target = '_blank'
+  link.rel = 'noopener noreferrer'
+  
+  // Append to body, click, and remove
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  
+  emit('download', props.url)
+  emit('success', props.filename || 'downloaded-file')
+}
+
+const downloadWithFetch = async () => {
+  try {
+    const response = await fetch(props.url)
+    
+    if (!response.ok) {
+      throw new Error(`Download failed: ${response.status} ${response.statusText}`)
+    }
+    
+    const blob = await response.blob()
+    const url = window.URL.createObjectURL(blob)
+    
+    const link = document.createElement('a')
+    link.href = url
+    link.download = props.filename || getFilenameFromUrl(props.url) || 'download'
+    
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    
+    // Clean up the object URL
+    window.URL.revokeObjectURL(url)
+    
+    emit('download', props.url)
+    emit('success', props.filename || 'downloaded-file')
+  } catch (error) {
+    throw new Error(`Fetch download failed: ${error}`)
+  }
+}
+
+const getFilenameFromUrl = (url: string): string => {
+  try {
+    const urlObj = new URL(url)
+    const pathname = urlObj.pathname
+    const filename = pathname.split('/').pop()
+    return filename || 'download'
+  } catch {
+    return 'download'
+  }
+}
+
+// Inherit all Vuetify button attributes except the ones we override
+defineOptions({
+  inheritAttrs: false
+})
+</script>
+
+<style scoped>
+.download-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.download-title {
+  margin: 0 4px;
+}
+
+.icon-start {
+  margin-right: 4px;
+}
+
+.icon-end {
+  margin-left: 4px;
+}
+
+/* RTL Support */
+[dir="rtl"] .download-button {
+  gap: 8px;
+}
+
+[dir="rtl"] .icon-start {
+  margin-right: 0;
+  margin-left: 4px;
+}
+
+[dir="rtl"] .icon-end {
+  margin-left: 0;
+  margin-right: 4px;
+}
+</style>

package/src/components/shared/MoneyInput.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    required: false,
+    default: 0,
+    validator: (value) => value === null || value === undefined || typeof value === 'string' || typeof value === 'number'
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  clearable: {
+    type: Boolean,
+    default: false
+  },
+  variant: {
+    type: String,
+    default: 'outlined'
+  },
+  errorMessages: {
+    type: [String, Array],
+    default: () => []
+  },
+  min: {
+    type: Number,
+    default: undefined
+  },
+  max: {
+    type: Number,
+    default: undefined
+  },
+  suffix: {
+    type: String,
+    default: ''
+  },
+  prefix: {
+    type: String,
+    default: ''
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+// Memoization for better performance
+const lastProcessedValue = ref<string | number | null | undefined>(null);
+const lastFormattedValue = ref<string>('');
+
+const displayValue = computed({
+  get() {
+    // Format with commas for display
+    const val = props.modelValue;
+    if (val === undefined || val === null || val === 0) return '';
+    return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  },
+  set(val: string | null | undefined) {
+    // Remove all non-digit characters and emit as number
+    const safeVal = (val ?? '').replace(/[^\d]/g, '');
+    emit('update:modelValue', safeVal === '' ? 0 : Number(safeVal));
+  }
+});
+
+function onKeyPress(event: KeyboardEvent) {
+  if (!/[0-9]/.test(event.key)) {
+    event.preventDefault();
+  }
+}
+</script>
+
+<template>
+  <v-text-field
+    v-model="displayValue"
+    :label="props.label"
+    :placeholder="props.placeholder"
+    :disabled="props.disabled"
+    :readonly="props.readonly"
+    :clearable="props.clearable"
+    :variant="props.variant as any"
+    :error-messages="props.errorMessages as string[]"
+    :suffix="props.suffix"
+    :prefix="props.prefix"
+    inputmode="numeric"
+    pattern="[0-9]*"
+    type="text"
+    @keypress="onKeyPress"
+  >
+    <template v-for="(slot) in $slots" #[slot]="scope">
+      <slot :name="slot" v-bind="scope || {}" />
+    </template>
+  </v-text-field>
+</template>