frappe-ui 0.1.234 → 0.1.235

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.234",
+  "version": "0.1.235",
   "description": "A set of components and utilities for rapid UI development",
   "type": "module",
   "sideEffects": false,

package/src/components/MonthPicker/MonthPicker.story.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import MonthPicker from './MonthPicker.vue'
+const val = ref('')
+</script>
+
+<template>
+  <Story :layout="{ type: 'grid', width: 500 }">
+    <Variant title="Default">
+      <div class="p-2">
+        <MonthPicker v-model="val" />
+      </div>
+    </Variant>
+
+    <Variant title="Fit width">
+      <div class="p-2">
+        <MonthPicker v-model="val" class="w-fit" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/MonthPicker/MonthPicker.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { MonthPickerProps } from './types'
+
+import Popover from '../Popover/Popover.vue'
+import LucideCalender from '~icons/lucide/calendar'
+import LucideChevronLeft from '~icons/lucide/chevron-left'
+import LucideChevronRight from '~icons/lucide/chevron-right'
+
+const props = withDefaults(defineProps<MonthPickerProps>(), {
+  placeholder: 'Select month',
+})
+
+const viewMode = ref('month')
+const model = defineModel<String>({ default: '' })
+
+const months = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+]
+
+const currentYear = ref(new Date().getFullYear())
+
+const yearRangeStart = computed(
+  () => currentYear.value - (currentYear.value % 12),
+)
+const yearRange = computed(() =>
+  Array.from({ length: 12 }, (_, i) => yearRangeStart.value + i),
+)
+
+const pickerList = computed(() =>
+  viewMode.value == 'year' ? yearRange.value : months,
+)
+
+const toggleViewMode = () => {
+  viewMode.value = viewMode.value == 'year' ? 'month' : 'year'
+}
+
+const handleOnClick = (v: string | number) => {
+  let ar = model.value.split(' ')
+  const indexToModify = viewMode.value == 'year' ? 1 : 0
+  ar[indexToModify] = String(v)
+  model.value = ar.join(' ')
+}
+
+const prevClick = () => {
+  currentYear.value += viewMode.value == 'year' ? -12 : -1
+}
+
+const nextClick = () => {
+  currentYear.value += viewMode.value == 'year' ? 12 : 1
+}
+
+const formatBtn = (v: string | number) =>
+  viewMode.value == 'month' ? (v as String).slice(0, 3) : v
+</script>
+
+<template>
+  <Popover
+    popover-class="mt-2 shadow-xl rounded-lg border bg-surface-modal p-2"
+  >
+    <template #target="{ togglePopover }">
+      <Button @click="togglePopover" class="w-full justify-between">
+        {{ model || props.placeholder }}
+        <template #suffix> <LucideCalender class="size-4" /> </template>
+      </Button>
+    </template>
+
+    <template #body>
+      <div class="flex gap-2 justify-between">
+        <Button variant="ghost" @click="prevClick">
+          <LucideChevronLeft class="size-4 text-ink-gray-5" />
+        </Button>
+
+        <!-- view toggler -->
+        <Button @click="toggleViewMode">
+          <template v-if="viewMode == 'month'">
+            {{ model.split(' ')[1] ?? currentYear }}
+          </template>
+          <template v-else>
+            {{ yearRangeStart }} - {{ yearRangeStart + 11 }}
+          </template>
+        </Button>
+
+        <Button variant="ghost" @click="nextClick">
+          <LucideChevronRight class="size-4 text-ink-gray-5" />
+        </Button>
+      </div>
+
+      <hr class="my-2" />
+
+      <!-- picker btns  -->
+      <div class="grid grid-cols-3 gap-3">
+        <Button
+          v-for="x in pickerList"
+          @click="() => handleOnClick(x)"
+          :variant="model.includes(String(x)) ? 'solid' : 'ghost'"
+          :key="x"
+          class="text-sm text-ink-gray-9"
+        >
+          {{ formatBtn(x) }}
+        </Button>
+      </div>
+    </template>
+  </Popover>
+</template>

package/src/components/MonthPicker/index.ts

@@ -0,0 +1 @@
+export { default as MonthPicker } from "./MonthPicker.vue";

package/src/components/MonthPicker/types.ts

@@ -0,0 +1,3 @@
+export interface MonthPickerProps {
+  placeholder?: string;
+}

package/src/components/Select/Select.vue

@@ -104,18 +104,16 @@ const selectOptions = computed(() => {
       >
         <SelectViewport class="p-1 flex flex-col">
           <SelectItem
-            v-for="(option, index) in selectOptions"
+            v-for="option in selectOptions"
             :disabled="option.disabled"
-            :key="index"
+            :key="option.value"
             :value="option.value"
             :class="[sizeClasses, paddingClasses, fontSizeClasses]"
             class="text-base text-ink-gray-9 flex items-center relative data-[highlighted]:bg-surface-gray-2 border-0 [data-state=checked]:bg-surface-gray-2 data-[disabled]:text-ink-gray-4"
           >
-            <slot name="option" v-bind="{ option }">
-              <SelectItemText>
-                {{ option.label }}
-              </SelectItemText>
-            </slot>
+            <SelectItemText>
+              <slot name="option" v-bind="{ option }">{{ option.label }}</slot>
+            </SelectItemText>
           </SelectItem>
 
           <slot name="footer" />

package/src/index.ts

@@ -10,6 +10,7 @@ export { default as Card } from './components/Card.vue'
 export * from './components/Combobox'
 export * from './components/Checkbox'
 export * from './components/DatePicker'
+export * from './components/MonthPicker'
 export * from './components/Dialog'
 export { default as Dialogs } from './components/Dialogs.vue'
 export * from './components/Divider'