frappe-ui 0.1.233 → 0.1.235

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.233",
+  "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.story.vue

@@ -2,6 +2,8 @@
 import { ref } from 'vue'
 import Select from './Select.vue'
 import LucideUser from '~icons/lucide/user'
+import LucideRotate from '~icons/lucide/rotate-ccw'
+import { SelectItemText } from 'reka-ui'
 
 const value = ref('')
 const options = [
@@ -14,7 +16,7 @@ const options = [
 ]
 </script>
 <template>
-  <Story :layout="{ width: 500, type: 'grid' }">
+  <Story :layout="{ width: 300, type: 'grid' }">
     <Variant title="Default">
       <div class="p-2">
         <Select :options="options" v-model="value" />
@@ -30,5 +32,47 @@ const options = [
         </Select>
       </div>
     </Variant>
+
+    <Variant title="Custom footer slot">
+      <div class="p-2">
+        <Select :options="options" v-model="value">
+          <template #footer>
+            <div class="grid gap-1">
+              <hr />
+              <Button variant='ghost'>
+                <template #prefix>
+                  <LucideRotate class="size-4 text-ink-gray-9" />
+                </template>
+                Reset
+              </Button>
+            </div>
+          </template>
+        </Select>
+      </div>
+    </Variant>
+
+    <Variant title="Custom option slot">
+      <div class="p-2">
+        <Select :options="options" v-model="value">
+          <template #option="{ option }">
+            <div class="inline-flex gap-2 items-center">
+              <Avatar
+                size="sm"
+                image="https://avatars.fastly.steamstatic.com/9ebf36bd3dc6c34f2d79ccf5d63e00eb7866321e_full.jpg"
+              />
+              <SelectItemText> {{ option.label }} </SelectItemText>
+            </div>
+          </template>
+        </Select>
+      </div>
+    </Variant>
+
+    <Variant title="No suffix">
+      <div class="p-2">
+        <Select :options="options" v-model="value">
+          <template #suffix> {{ ' ' }} </template>
+        </Select>
+      </div>
+    </Variant>
   </Story>
 </template>

package/src/components/Select/Select.vue

@@ -91,7 +91,9 @@ const selectOptions = computed(() => {
     >
       <slot name="prefix" />
       <SelectValue :placeholder="props.placeholder" />
-      <LucideChevronDown class="size-4 text-ink-gray-4 ml-auto" />
+      <slot name="suffix">
+        <LucideChevronDown class="size-4 text-ink-gray-4 ml-auto" />
+      </slot>
     </SelectTrigger>
 
     <SelectPortal>
@@ -102,17 +104,19 @@ 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"
           >
             <SelectItemText>
-              {{ option.label }}
+              <slot name="option" v-bind="{ option }">{{ option.label }}</slot>
             </SelectItemText>
           </SelectItem>
+
+          <slot name="footer" />
         </SelectViewport>
       </SelectContent>
     </SelectPortal>

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'