pimelon-ui 0.1.238 → 0.1.262

package/icons/Icon.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { onMounted } from 'vue';
+
+const props = defineProps<{ name: string }>()
+
+onMounted(() => {
+  if (!document.getElementById('lucide-sprite')) {
+    console.warn(
+      'Lucide sprite not found! Make sure to use the spritePlugin.'
+    )
+  }
+})
+</script>
+
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <use :href="`#${props.name}`" />
+  </svg>
+</template>

package/icons/IconPicker.story.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import IconPicker from './IconPicker.vue'
+
+const basicValue = ref(null)
+const preselectedValue = ref('star')
+const disabledValue = ref('')
+
+const state = reactive({
+  disabled: false,
+  placeholder: 'Select an icon...',
+  openOnClick: true,
+  openOnFocus: true,
+  placement: 'start',
+})
+</script>
+
+<template>
+  <Story title="IconPicker" :layout="{ type: 'grid', width: 400 }">
+    <Variant title="Basic Usage">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Basic Icon Picker</label>
+        <IconPicker
+          v-model="basicValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+          :open-on-click="state.openOnClick"
+          :open-on-focus="state.openOnFocus"
+          :placement="state.placement"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected: {{ basicValue || 'None' }}
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Subtle Variant (Default)">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Subtle Variant</label>
+        <IconPicker
+          variant="subtle"
+          v-model="basicValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected: {{ basicValue || 'None' }}
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Outline Variant">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Outline Variant</label>
+        <IconPicker
+          variant="outline"
+          v-model="basicValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected: {{ basicValue || 'None' }}
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Ghost Variant">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Ghost Variant</label>
+        <IconPicker
+          variant="ghost"
+          v-model="basicValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected: {{ basicValue || 'None' }}
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Pre-selected Icon">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Pre-selected Icon</label>
+        <IconPicker
+          v-model="preselectedValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected: {{ preselectedValue || 'None' }}
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Disabled State">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Disabled Icon Picker</label>
+        <IconPicker
+          v-model="disabledValue"
+          placeholder="This is disabled"
+          :disabled="true"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Icon picker is disabled
+        </div>
+      </div>
+    </Variant>
+
+    <template #controls>
+      <HstText v-model="state.placeholder" title="Placeholder" />
+      <HstCheckbox v-model="state.disabled" title="Disabled" />
+      <HstCheckbox v-model="state.openOnClick" title="Open on Click" />
+      <HstCheckbox v-model="state.openOnFocus" title="Open on Focus" />
+      <HstSelect
+        v-model="state.placement"
+        title="Placement"
+        :options="[
+          { value: 'start', label: 'Start' },
+          { value: 'center', label: 'Center' },
+          { value: 'end', label: 'End' }
+        ]"
+      />
+    </template>
+  </Story>
+</template>

package/icons/IconPicker.vue

@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import {
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxPortal,
+  ComboboxRoot,
+  ComboboxTrigger,
+  ComboboxViewport,
+} from 'reka-ui'
+import { computed, onMounted, ref, watch } from 'vue'
+import Icon from './Icon.vue'
+
+export interface IconPickerProps {
+  variant?: 'subtle' | 'outline' | 'ghost'
+  modelValue?: string | null
+  placeholder?: string
+  disabled?: boolean
+  openOnFocus?: boolean
+  openOnClick?: boolean
+  placement?: 'start' | 'center' | 'end'
+  maxIcons?: number
+}
+
+const props = withDefaults(defineProps<IconPickerProps>(), {
+  variant: 'subtle',
+  openOnClick: true,
+  openOnFocus: true,
+  maxIcons: 100,
+})
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'input'])
+
+const searchTerm = ref(getLabel(props.modelValue || ''))
+const internalModelValue = ref(props.modelValue)
+const isOpen = ref(false)
+const iconNames = ref<string[]>([])
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    internalModelValue.value = newValue
+    searchTerm.value = newValue ? getLabel(newValue) : ''
+  },
+)
+
+onMounted(() => {
+  const spriteContainer = document.getElementById('lucide-sprite')
+  if (!spriteContainer) {
+    console.warn('Lucide sprite not found! Make sure to use the spritePlugin.')
+    return
+  }
+
+  const symbols = spriteContainer.getElementsByTagName('symbol')
+  const names: string[] = []
+  for (let i = 0; i < symbols.length; i++) {
+    const symbol = symbols[i]
+    names.push(symbol.id)
+  }
+  iconNames.value = names
+})
+
+function getLabel(name: string) {
+  return name.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
+}
+
+const filteredIcons = computed(() => {
+  if (!searchTerm.value) return iconNames.value
+  const lowerSearch = searchTerm.value.toLowerCase()
+  return iconNames.value.filter((name) =>
+    name.replace(/-/g, ' ').toLowerCase().includes(lowerSearch),
+  )
+})
+
+const onUpdateModelValue = (value: string | null) => {
+  internalModelValue.value = value
+  emit('update:modelValue', value)
+  searchTerm.value = value ? getLabel(value) : ''
+  isOpen.value = false
+}
+
+const handleInputChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  searchTerm.value = target.value
+
+  if (searchTerm.value === '') {
+    internalModelValue.value = null
+    emit('update:modelValue', null)
+  }
+  emit('input', searchTerm.value)
+}
+
+const handleOpenChange = (open: boolean) => {
+  isOpen.value = open
+  if (!open) {
+    searchTerm.value = internalModelValue.value
+      ? getLabel(internalModelValue.value)
+      : ''
+  }
+}
+
+const handleClick = (event: MouseEvent) => {
+  if (props.openOnClick) {
+    isOpen.value = true
+  }
+}
+
+const handleFocus = (event: FocusEvent) => {
+  if (props.openOnFocus) {
+    isOpen.value = true
+  }
+  emit('focus', event)
+}
+
+const handleBlur = (event: FocusEvent) => {
+  emit('blur', event)
+}
+
+const handleIconClick = (iconName: string) => {
+  onUpdateModelValue(iconName)
+}
+
+const reset = () => {
+  searchTerm.value = ''
+  internalModelValue.value = null
+  emit('update:modelValue', null)
+}
+
+const variantClasses = computed(() => {
+  const borderCss =
+    'border focus-within:border-outline-gray-4 focus-within:ring-2 focus-within:ring-outline-gray-3'
+
+  return {
+    subtle: `${borderCss} bg-surface-gray-2 hover:bg-surface-gray-3 border-transparent`,
+    outline: `${borderCss} border-outline-gray-2`,
+    ghost: '',
+  }[props.variant]
+})
+
+defineExpose({
+  reset,
+})
+</script>
+
+<template>
+  <div class="relative">
+    <ComboboxRoot
+      :model-value="internalModelValue"
+      @update:modelValue="onUpdateModelValue"
+      @update:open="handleOpenChange"
+      :ignore-filter="true"
+      :open="isOpen"
+    >
+      <ComboboxAnchor
+        class="flex h-7 w-full items-center justify-between gap-2 rounded px-2 py-1 transition-colors"
+        :class="{
+          'opacity-50 pointer-events-none': disabled,
+          [variantClasses]: true,
+        }"
+        @click="handleClick"
+      >
+        <div class="flex items-center gap-2 flex-1 overflow-hidden">
+          <Icon
+            :name="internalModelValue || 'circle-dashed'"
+            class="w-4 h-4 flex-shrink-0"
+          />
+          <ComboboxInput
+            :value="searchTerm"
+            @input="handleInputChange"
+            @focus="handleFocus"
+            @blur="handleBlur"
+            class="bg-transparent p-0 focus:outline-0 border-0 focus:border-0 focus:ring-0 text-base text-ink-gray-8 h-full placeholder:text-ink-gray-4 w-full"
+            :placeholder="placeholder || 'Select an icon...'"
+            :disabled="disabled"
+            autocomplete="off"
+          />
+        </div>
+        <ComboboxTrigger :disabled="disabled">
+          <Icon name="chevron-down" class="h-4 w-4 text-ink-gray-5" />
+        </ComboboxTrigger>
+      </ComboboxAnchor>
+      <ComboboxPortal>
+        <ComboboxContent
+          class="z-10 w-60 mt-1 bg-surface-modal overflow-hidden rounded-lg shadow-2xl"
+          position="popper"
+          @openAutoFocus.prevent
+          @closeAutoFocus.prevent
+          :align="props.placement || 'start'"
+        >
+          <ComboboxViewport class="max-h-60 overflow-auto p-2">
+            <ComboboxEmpty
+              v-if="filteredIcons.length === 0"
+              class="text-ink-gray-5 text-base text-center py-1.5 px-2.5"
+            >
+              <template v-if="searchTerm">
+                No icons found for "{{ searchTerm }}"
+              </template>
+              <template v-else> No icons available. </template>
+            </ComboboxEmpty>
+            <div v-if="filteredIcons.length > 0" class="flex flex-wrap">
+              <button
+                v-for="iconName in filteredIcons.slice(0, props.maxIcons)"
+                :key="iconName"
+                @click="handleIconClick(iconName)"
+                type="button"
+                class="w-8 h-8 flex items-center justify-center rounded hover:bg-surface-gray-3 transition-colors"
+                :class="{
+                  'bg-surface-gray-3': internalModelValue === iconName,
+                }"
+                :title="getLabel(iconName)"
+              >
+                <Icon :name="iconName" class="w-4 h-4" />
+              </button>
+            </div>
+          </ComboboxViewport>
+        </ComboboxContent>
+      </ComboboxPortal>
+    </ComboboxRoot>
+  </div>
+</template>

package/icons/index.ts

@@ -8,3 +8,8 @@ export { default as LightningIcon } from './LightningIcon.vue'
 export { default as MaximizeIcon } from './MaximizeIcon.vue'
 export { default as MinimizeIcon } from './MinimizeIcon.vue'
 export { default as StepsIcon } from './StepsIcon.vue'
+
+// Lucide Icons
+export { default as Icon } from './Icon.vue'
+export { default as IconPicker } from './IconPicker.vue'
+export { default as spritePlugin } from './spritePlugin'

package/icons/spritePlugin.ts

@@ -0,0 +1,13 @@
+// @ts-ignore
+import sprite from 'lucide-static/sprite.svg?raw'
+import type { App } from 'vue'
+
+export default {
+  install(app: App) {
+    const div = document.createElement('div')
+    div.id = 'lucide-sprite'
+    div.style.display = 'none'
+    div.innerHTML = sprite
+    document.body.prepend(div)
+  },
+}

package/melon/DataImport/MappingStep.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="w-[85%] lg:w-[700px] mx-auto py-12 space-y-8">
+    <div class="w-[85%] lg:w-[700px] mx-auto py-12 space-y-8 text-base">
        <div class="flex justify-between">
             <div class="space-y-2">
                 <div class="text-lg font-semibold text-ink-gray-9">
@@ -10,7 +10,7 @@
                         {{ data?.status }}
                     </Badge>
                 </div>
-                <div class="leading-5">
+                <div class="leading-5 text-ink-gray-7">
                     Change the mapping of columns from your file to fields in the system
                 </div>
             </div>

package/melon/DataImport/PreviewStep.vue

@@ -17,7 +17,7 @@
                     variant="solid" @click="startImport" />
                 <Button v-else-if="listRoute" label="Done" @click="redirectToList()" />
             </div>
-            <div class="leading-5">
+            <div class="leading-5 text-ink-gray-7">
                 Verify the data before starting the import process
             </div>
         </div>
@@ -26,7 +26,7 @@
             <div class="text-ink-gray-5 text-sm">
                 Column Mapping
             </div>
-            <div class="border rounded-md bg-surface-gray-2 p-4 space-y-4 text-sm">
+            <div class="border rounded-md bg-surface-gray-2 p-4 space-y-4 text-sm text-ink-gray-7">
                 <div v-for="map in mapping" class="grid grid-cols-[40%,10%,40%] lg:grid-cols-3 space-x-3 items-center">
                     <div class="">
                         {{ map[0] }}
@@ -41,6 +41,18 @@
             </div>
         </div>
 
+        <div v-if="warnings.length" class="space-y-2">
+            <div class="text-ink-gray-5 text-sm">
+                Warnings
+            </div>
+            <div class="rounded-md bg-surface-amber-2 p-2 space-y-2 text-xs">
+                <div v-for="warning in warnings" class="flex items-center space-x-2">
+                    <FeatherIcon name="alert-circle" class="size-3 text-ink-amber-3" />
+                    <div v-html="warning.message" class="text-ink-amber-3"></div>
+                </div>
+            </div>
+        </div>
+
         <div v-if="preview?.data?.length" class="border rounded-md overflow-x-auto">
             <table class="divide-y">
                 <thead class="rounded-t-md">
@@ -325,6 +337,10 @@ const mapping = computed(() => {
     return warningMap;
 })
 
+const warnings = computed(() => {
+    return preview.value?.warnings?.filter((warning: any) => warning.type != "info") || [];
+})
+
 const listRoute = computed(() => {
     return props.doctypeMap[props.data.reference_doctype]?.listRoute
 })

package/melon/DataImport/UploadStep.vue

@@ -38,7 +38,7 @@
                         class="hidden"
                         @change="(e) => uploadFile(e)"
                     />
-                    <div class="leading-5">
+                    <div class="leading-5 text-ink-gray-9">
                         Drag and drop a CSV file, or upload from your 
                         <span @click="openFileSelector" class="cursor-pointer font-semibold hover:underline">Device</span> 
                         or 
@@ -67,7 +67,7 @@
             <div v-else-if="importFile" class="h-[300px] flex items-center justify-center bg-surface-gray-1 border border-dashed border-outline-gray-3 rounded-md">
                 <div class="w-4/5 lg:w-2/5 bg-surface-white border rounded-md p-2 flex items-center justify-between items-center">
                     <div class="space-y-2">
-                        <div class="font-medium leading-5">
+                        <div class="font-medium leading-5 text-ink-gray-9">
                             {{ importFile.file_name || importFile.split("/").pop() }}
                         </div>
                         <div v-if="importFile.file_size" class="text-ink-gray-6">

package/melon/Filter/Filter.vue

@@ -98,6 +98,7 @@ const filterCount = computed(() =>
   <Popover
     popover-class="mt-2 p-2 rounded-lg border bg-surface-modal shadow-xl max-w-xl"
     placement="bottom-end"
+    :matchTargetWidth="true"
   >
     <template #target="{ close, togglePopover }">
       <Button

package/melon/Filter/utils.ts

@@ -140,7 +140,7 @@ export const getValueControl = (row: StateRow) => {
   }
 
   if (typeSelect.includes(fieldType) || typeCheck.includes(fieldType)) {
-    let _options = options || ['yes', 'no']
+    let _options = options || ['Yes', 'No']
 
     return h(Select, { placeholder: 'Select Option', options: _options })
   }
@@ -225,9 +225,10 @@ export const parseFilters = (filters: any) => {
 
   return _filters.map(transformIn).reduce((acc, cur) => {
     if (['equals', '='].includes(cur.operator)) {
-      cur.value = cur.toBoolean ? 'Yes' : cur.value
-    } //
-    else if (cur.operator === 'between') cur.value = [...cur.value.split(',')]
+      cur.value = cur.value == 'Yes' ? true : cur.value == 'No' ? false : cur.value
+    } else if (cur.operator === 'between') {
+      cur.value = [...cur.value.split(',')]
+    }
 
     return [
       ...acc,

package/melon/drive/components/AppSwitcher.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+router.afterEach(() => {
+  open.value = false
+})
+
+defineProps<{
+  apps: Array<{
+    title: string
+    logo: string
+    route: string
+  }>
+}>()
+
+const open = ref(false)
+</script>
+
+<template>
+  <div class="fixed left-0 top-0 h-screen w-3 z-40" @mouseenter="open = true" />
+  <aside
+    class="fixed left-0 top-0 h-screen z-50 transition-transform duration-300 ease-out bg-surface-white border-r border-gray-200 px-2"
+    :class="!open && '-translate-x-full'"
+    @mouseleave="open = false"
+  >
+    <div class="flex h-full items-center justify-center">
+      <div class="flex flex-col gap-6">
+        <a
+          v-for="app in apps"
+          :key="app.route"
+          :href="app.route"
+          :title="app.title"
+          class="group flex items-center justify-center rounded-md hover:shadow-sm transition"
+        >
+          <img
+            :src="app.logo"
+            :alt="app.title"
+            class="size-7 opacity-80 group-hover:opacity-100"
+          />
+        </a>
+      </div>
+    </div>
+  </aside>
+</template>

package/melon/drive/components/DriveLogo.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    width="118"
+    height="118"
+    viewBox="0 0 118 118"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M93.9278 0H23.1013C10.3428 0 0 10.3428 0 23.1013V93.9278C0 106.686 10.3428 117.029 23.1013 117.029H93.9278C106.686 117.029 117.029 106.686 117.029 93.9278V23.1013C117.029 10.3428 106.686 0 93.9278 0Z"
+      fill="#016E7D"
+    />
+    <path
+      d="M80.1723 35.7545H59.7487L55.7059 28.2466H20.8965V38.7472H49.4056L53.4483 46.2551H82.955C83.9525 46.2551 84.7926 47.0951 84.7926 48.0927V76.4968C84.7926 77.4943 83.9525 78.3344 82.955 78.3344H33.2347C32.2371 78.3344 31.3971 77.4943 31.3971 76.4968V50.5603H20.8965V73.6616C20.8965 82.0096 27.6694 88.835 36.0173 88.835H80.1723C88.5203 88.835 95.2932 82.0621 95.2932 73.6616V50.8754C95.2932 42.5274 88.5203 35.702 80.1723 35.702V35.7545Z"
+      fill="#EEFBFF"
+    />
+  </svg>
+</template>