@polymarbot/nuxt-layer-shadcn-ui 0.1.0

package/app/components/ui/DatePicker/index.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import type { Locale } from 'date-fns'
+import type { DatePickerProps } from './types'
+import { VueDatePicker } from '@vuepic/vue-datepicker'
+import { enUS } from 'date-fns/locale/en-US'
+import { ja } from 'date-fns/locale/ja'
+import '@vuepic/vue-datepicker/dist/main.css'
+import './style.css'
+
+const dateFnsLocaleMap: Record<string, Locale> = {
+  ja,
+  en: enUS,
+}
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<DatePickerProps>(), {
+  modelValue: undefined,
+  type: 'date',
+  showTime: false,
+  disabled: false,
+  readonly: false,
+  placeholder: undefined,
+  minDate: undefined,
+  maxDate: undefined,
+  valueFormat: undefined,
+  autoApply: true,
+  class: undefined,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: Date | string | null]
+}>()
+
+const model = computed({
+  get: () => props.modelValue,
+  set: value => emit('update:modelValue', value ?? null),
+})
+
+const T = useTranslations('components.ui.DatePicker')
+
+const { locale: i18nLocale } = useI18n()
+const dateFnsLocale = computed(() => dateFnsLocaleMap[i18nLocale.value] ?? ja)
+
+const hasTime = computed(() => !!props.showTime)
+
+const formatKey = computed(() => {
+  if (props.type === 'year') return 'year'
+  if (props.type === 'month') return 'month'
+  if (hasTime.value) return 'dateTime'
+  return 'date'
+})
+
+const defaultFormat = computed(() => T(`format.${formatKey.value}`))
+
+const timeConfig = computed(() => {
+  if (typeof props.showTime === 'object') {
+    return { enableTimePicker: true, ...props.showTime }
+  }
+  return { enableTimePicker: props.showTime }
+})
+</script>
+
+<template>
+  <VueDatePicker
+    v-model="model"
+    v-bind="$attrs"
+    :class="props.class"
+    :locale="dateFnsLocale"
+    :timeConfig="timeConfig"
+    :disabled="disabled"
+    :readonly="readonly"
+    :placeholder="placeholder"
+    :minDate="minDate"
+    :maxDate="maxDate"
+    :formats="{ input: defaultFormat }"
+    :modelType="valueFormat"
+    :monthPicker="type === 'month'"
+    :yearPicker="type === 'year'"
+    :autoApply="autoApply"
+    :inputAttrs="{ clearable: false }"
+    textInput
+  >
+    <template #dp-input="{ value, onInput, onEnter, onTab, onClear, onBlur, onFocus, openMenu }">
+      <div @click.stop>
+        <Input
+          :modelValue="value"
+          :placeholder="placeholder ?? T('placeholder')"
+          :disabled="disabled"
+          :readonly="readonly"
+          @update:modelValue="(v: string | undefined) => onInput(v ?? '')"
+          @keydown.enter="onEnter"
+          @keydown.tab="onTab"
+          @change="(v: string | undefined) => { if (!v) onClear() }"
+          @blur="onBlur"
+          @focus="() => { onFocus(); openMenu() }"
+        >
+          <template #prefix>
+            <Icon
+              name="calendar-days"
+              class="cursor-pointer text-muted-foreground"
+              @click="openMenu"
+            />
+          </template>
+        </Input>
+      </div>
+    </template>
+    <template #arrow-left>
+      <Icon name="chevron-left" />
+    </template>
+    <template #arrow-right>
+      <Icon name="chevron-right" />
+    </template>
+    <template #arrow-up>
+      <Icon name="chevron-up" />
+    </template>
+    <template #arrow-down>
+      <Icon name="chevron-down" />
+    </template>
+    <template #calendar-icon>
+      <Icon name="calendar-days" />
+    </template>
+    <template #clock-icon>
+      <Icon name="clock" />
+    </template>
+  </VueDatePicker>
+</template>

package/app/components/ui/DatePicker/style.css

@@ -0,0 +1,88 @@
+/*
+ * @vuepic/vue-datepicker theme override
+ * Maps dp__* CSS variables to shadcn color tokens (oklch)
+ */
+
+/* ==========================================
+ * CSS Variable Overrides
+ * ========================================== */
+
+/* Color variables (shared light & dark) */
+.dp__theme_light,
+.dp__theme_dark {
+  --dp-background-color: var(--color-popover);
+  --dp-text-color: var(--color-popover-foreground);
+  --dp-icon-color: var(--color-muted-foreground);
+  --dp-tooltip-color: var(--color-popover);
+  --dp-primary-color: var(--color-primary);
+  --dp-primary-text-color: var(--color-primary-foreground);
+  --dp-primary-disabled-color: var(--color-muted-foreground);
+  --dp-hover-color: var(--color-accent);
+  --dp-hover-text-color: var(--color-accent-foreground);
+  --dp-hover-icon-color: var(--color-foreground);
+  --dp-border-color: var(--color-border);
+  --dp-menu-border-color: var(--color-border);
+  --dp-border-color-hover: var(--color-ring);
+  --dp-border-color-focus: var(--color-ring);
+  --dp-secondary-color: var(--color-muted-foreground);
+  --dp-disabled-color: var(--color-muted);
+  --dp-disabled-color-text: var(--color-muted-foreground);
+  --dp-scroll-bar-background: var(--color-muted);
+  --dp-scroll-bar-color: var(--color-muted-foreground);
+  --dp-success-color: var(--color-success);
+  --dp-success-color-disabled: var(--color-muted-foreground);
+  --dp-danger-color: var(--color-danger);
+  --dp-marker-color: var(--color-danger);
+}
+
+/* Theme-specific color overrides */
+.dp__theme_light {
+  --dp-highlight-color: oklch(from var(--color-primary) l c h / 10%);
+}
+
+.dp__theme_dark {
+  --dp-highlight-color: oklch(from var(--color-primary) l c h / 20%);
+}
+
+/* Shape, sizing, spacing, font */
+.dp__main {
+  --dp-border-radius: var(--radius-md);
+  --dp-cell-border-radius: var(--radius-md);
+  --dp-cell-size: 28px;
+  --dp-button-height: 28px;
+  --dp-month-year-row-height: 28px;
+  --dp-common-padding: 4px;
+  --dp-overlay-col-padding: 4px;
+  --dp-font-family: inherit;
+  --dp-font-size: 0.875rem;
+}
+
+/* ==========================================
+ * Style Overrides (align with shadcn)
+ * ========================================== */
+
+/* Overlay bottom button (back to calendar / toggle time) */
+.dp__button,
+.dp__action_row,
+.dp__arrow_bottom {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+}
+
+/* Calendar cell: center within grid item */
+.dp__cell_inner {
+  margin: 0 auto;
+}
+
+/* Calendar grid: uniform gap between cells */
+.dp__calendar_row {
+  gap: 4px;
+  margin: 4px 0;
+}
+
+/* Menu: shadow-md */
+.dp__menu {
+  box-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
+}

package/app/components/ui/DatePicker/types.ts

@@ -0,0 +1,41 @@
+export interface DatePickerTimeConfig {
+  enableSeconds?: boolean
+  enableMinutes?: boolean
+  is24?: boolean
+  noHoursOverlay?: boolean
+  noMinutesOverlay?: boolean
+  noSecondsOverlay?: boolean
+  hoursIncrement?: number | string
+  minutesIncrement?: number | string
+  secondsIncrement?: number | string
+  hoursGridIncrement?: number | string
+  minutesGridIncrement?: number | string
+  secondsGridIncrement?: number | string
+  timePickerInline?: boolean
+  startTime?: { hours: number, minutes: number, seconds?: number }
+}
+
+export type DatePickerType = 'date' | 'month' | 'year'
+
+export interface DatePickerProps {
+  modelValue?: Date | string | null
+  /** Picker type: date (default), month, or year */
+  type?: DatePickerType
+  /** Enable time selection, or pass DatePickerTimeConfig for fine-grained control */
+  showTime?: boolean | DatePickerTimeConfig
+  /** Disable the date picker */
+  disabled?: boolean
+  /** Readonly mode */
+  readonly?: boolean
+  /** Placeholder text */
+  placeholder?: string
+  /** Minimum selectable date */
+  minDate?: Date | string
+  /** Maximum selectable date */
+  maxDate?: Date | string
+  /** v-model output format (e.g. 'yyyy-MM-dd', 'timestamp', 'iso') */
+  valueFormat?: string
+  /** Auto apply selection without confirm button */
+  autoApply?: boolean
+  class?: ClassValue
+}

package/app/components/ui/DateRangePicker/en.json

@@ -0,0 +1,5 @@
+{
+  "endPlaceholder": "End date",
+  "startPlaceholder": "Start date",
+  "to": "–"
+}

package/app/components/ui/DateRangePicker/index.stories.ts

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import DateRangePicker from './index.vue'
+
+const meta = {
+  title: 'UI/DateRangePicker',
+  component: DateRangePicker,
+  argTypes: {
+    showTime: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    maxSpanDays: { control: 'number' },
+  },
+  args: {
+    showTime: false,
+    disabled: false,
+    maxSpanDays: undefined,
+  },
+} satisfies Meta<typeof DateRangePicker>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { DateRangePicker },
+    setup () {
+      const range = ref({ start: null, end: null })
+      const withTime = ref({ start: null, end: null })
+      const maxSpan = ref({ start: null, end: null })
+      const preselected = ref({
+        start: new Date(2025, 5, 1),
+        end: new Date(2025, 5, 15),
+      })
+      return { args, range, withTime, maxSpan, preselected }
+    },
+    template: `
+      <div class="max-w-lg space-y-10">
+        <!-- Controlled -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
+          <DateRangePicker v-model="range" v-bind="args" />
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ range }}</div>
+        </section>
+
+        <!-- With Time -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Time</h3>
+          <DateRangePicker v-model="withTime" showTime />
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ withTime }}</div>
+        </section>
+
+        <!-- Max Span (7 days) -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Max Span (7 days)</h3>
+          <DateRangePicker v-model="maxSpan" :maxSpanDays="7" />
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ maxSpan }}</div>
+        </section>
+
+        <!-- Preselected -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Preselected</h3>
+          <DateRangePicker v-model="preselected" />
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ preselected }}</div>
+        </section>
+      </div>
+    `,
+  }),
+}

package/app/components/ui/DateRangePicker/index.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import type { DateRangePickerProps, DateRangePickerValue } from './types'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<DateRangePickerProps>(), {
+  modelValue: () => ({ start: null, end: null }),
+  showTime: false,
+  disabled: false,
+  readonly: false,
+  startPlaceholder: undefined,
+  endPlaceholder: undefined,
+  minDate: undefined,
+  maxDate: undefined,
+  maxSpanDays: undefined,
+  valueFormat: undefined,
+  autoApply: true,
+  class: undefined,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: DateRangePickerValue]
+}>()
+
+const T = useTranslations('components.ui.DateRangePicker')
+
+const startDate = ref<Date | string | null>(props.modelValue?.start ?? null)
+const endDate = ref<Date | string | null>(props.modelValue?.end ?? null)
+
+watch(() => props.modelValue, val => {
+  startDate.value = val?.start ?? null
+  endDate.value = val?.end ?? null
+})
+
+function emitRange () {
+  emit('update:modelValue', {
+    start: startDate.value,
+    end: endDate.value,
+  })
+}
+
+function handleStartUpdate (value: Date | string | null) {
+  startDate.value = value
+  emitRange()
+}
+
+function handleEndUpdate (value: Date | string | null) {
+  // If time is disabled, set end time to end of day
+  if (value instanceof Date && !props.showTime) {
+    const adjusted = new Date(value)
+    adjusted.setHours(23, 59, 59, 999)
+    endDate.value = adjusted
+  } else {
+    endDate.value = value
+  }
+  emitRange()
+}
+
+// Helper functions for date constraints
+function addDays (date: Date, days: number): Date {
+  const result = new Date(date)
+  result.setDate(result.getDate() + days)
+  return result
+}
+
+function toDate (value: Date | string | null): Date | undefined {
+  if (!value) return undefined
+  return value instanceof Date ? value : new Date(value)
+}
+
+// Start picker constraints
+const startMinDate = computed(() => {
+  const min = props.minDate
+  const spanLimit = props.maxSpanDays && endDate.value
+    ? addDays(toDate(endDate.value)!, -(props.maxSpanDays - 1))
+    : undefined
+  if (min && spanLimit) return new Date(Math.max(+new Date(min), +spanLimit))
+  return min ?? spanLimit
+})
+
+const startMaxDate = computed(() => {
+  const end = toDate(endDate.value)
+  const max = props.maxDate
+  if (end && max) return new Date(Math.min(+end, +new Date(max)))
+  return end ?? max
+})
+
+// End picker constraints
+const endMinDate = computed(() => {
+  const start = toDate(startDate.value)
+  const min = props.minDate
+  if (start && min) return new Date(Math.max(+start, +new Date(min)))
+  return start ?? min
+})
+
+const endMaxDate = computed(() => {
+  const max = props.maxDate
+  const spanLimit = props.maxSpanDays && startDate.value
+    ? addDays(toDate(startDate.value)!, props.maxSpanDays - 1)
+    : undefined
+  if (max && spanLimit) return new Date(Math.min(+new Date(max), +spanLimit))
+  return max ?? spanLimit
+})
+</script>
+
+<template>
+  <div :class="cn('flex items-center gap-2', props.class)">
+    <DatePicker
+      :modelValue="startDate"
+      :showTime="showTime"
+      :disabled="disabled"
+      :readonly="readonly"
+      :placeholder="startPlaceholder ?? T('startPlaceholder')"
+      :minDate="startMinDate"
+      :maxDate="startMaxDate"
+      :valueFormat="valueFormat"
+      :autoApply="autoApply"
+      v-bind="$attrs"
+      @update:modelValue="handleStartUpdate"
+    />
+    <span class="shrink-0 text-muted-foreground">
+      {{ T('to') }}
+    </span>
+    <DatePicker
+      :modelValue="endDate"
+      :showTime="showTime"
+      :disabled="disabled"
+      :readonly="readonly"
+      :placeholder="endPlaceholder ?? T('endPlaceholder')"
+      :minDate="endMinDate"
+      :maxDate="endMaxDate"
+      :valueFormat="valueFormat"
+      :autoApply="autoApply"
+      v-bind="$attrs"
+      @update:modelValue="handleEndUpdate"
+    />
+  </div>
+</template>

package/app/components/ui/DateRangePicker/types.ts

@@ -0,0 +1,31 @@
+import type { DatePickerTimeConfig } from '../DatePicker/types'
+
+export interface DateRangePickerValue {
+  start: Date | string | null
+  end: Date | string | null
+}
+
+export interface DateRangePickerProps {
+  modelValue?: DateRangePickerValue
+  /** Enable time selection, or pass DatePickerTimeConfig for fine-grained control */
+  showTime?: boolean | DatePickerTimeConfig
+  /** Disable the date range picker */
+  disabled?: boolean
+  /** Readonly mode */
+  readonly?: boolean
+  /** Placeholder for start date input */
+  startPlaceholder?: string
+  /** Placeholder for end date input */
+  endPlaceholder?: string
+  /** Minimum selectable date */
+  minDate?: Date | string
+  /** Maximum selectable date */
+  maxDate?: Date | string
+  /** Maximum span in days between start and end date */
+  maxSpanDays?: number
+  /** v-model output format (e.g. 'yyyy-MM-dd', 'timestamp', 'iso') */
+  valueFormat?: string
+  /** Auto apply selection without confirm button */
+  autoApply?: boolean
+  class?: ClassValue
+}

package/app/components/ui/Divider/index.stories.ts

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Divider from './index.vue'
+
+const meta = {
+  title: 'UI/Divider',
+  component: Divider,
+} satisfies Meta<typeof Divider>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { Divider },
+    setup: () => ({ args }),
+    template: `
+      <div class="space-y-10">
+        <!-- Horizontal -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Horizontal</h3>
+          <div class="space-y-4">
+            <p>Content above</p>
+            <Divider />
+            <p>Content below</p>
+          </div>
+        </section>
+
+        <!-- Vertical -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Vertical</h3>
+          <div class="flex h-8 items-center gap-4">
+            <span>Left</span>
+            <Divider type="vertical" />
+            <span>Center</span>
+            <Divider type="vertical" />
+            <span>Right</span>
+          </div>
+        </section>
+      </div>
+    `,
+  }),
+}

package/app/components/ui/Divider/index.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { Separator } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/separator'
+import type { DividerProps } from './types'
+
+withDefaults(defineProps<DividerProps>(), {
+  type: 'horizontal',
+})
+</script>
+
+<template>
+  <Separator
+    :orientation="type"
+  >
+    <slot />
+  </Separator>
+</template>

package/app/components/ui/Divider/types.ts

@@ -0,0 +1,3 @@
+export interface DividerProps {
+  type?: 'horizontal' | 'vertical'
+}

package/app/components/ui/Drawer/index.stories.ts

@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Button from '../Button/index.vue'
+import Input from '../Input/index.vue'
+import Drawer from './index.vue'
+
+const meta = {
+  title: 'UI/Drawer',
+  component: Drawer,
+  argTypes: {
+    loading: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    confirmDisabled: { control: 'boolean' },
+    showCancel: { control: 'boolean' },
+    showClose: { control: 'boolean' },
+    hideHeader: { control: 'boolean' },
+    hideFooter: { control: 'boolean' },
+    side: {
+      control: 'select',
+      options: [ 'top', 'right', 'bottom', 'left' ],
+    },
+  },
+  args: {
+    loading: false,
+    disabled: false,
+    confirmDisabled: false,
+    showCancel: false,
+    showClose: true,
+    hideHeader: false,
+    hideFooter: false,
+    side: 'right',
+  },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { Drawer, Button, Input },
+    setup () {
+      const controlled = ref(false)
+      const withDescription = ref(false)
+      const sideTop = ref(false)
+      const sideRight = ref(false)
+      const sideBottom = ref(false)
+      const sideLeft = ref(false)
+      const scrollable = ref(false)
+      return { args, controlled, withDescription, sideTop, sideRight, sideBottom, sideLeft, scrollable }
+    },
+    template: `
+      <div class="space-y-10">
+        <!-- Controlled -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
+          <Button @click="controlled = true">Open Drawer</Button>
+          <Drawer
+            v-model:visible="controlled"
+            v-bind="args"
+            title="Drawer Title"
+            confirmText="OK"
+            cancelText="Cancel"
+          >
+            <p>This is the drawer content.</p>
+            <Input class="mt-4" placeholder="Try interacting with this input" />
+          </Drawer>
+        </section>
+
+        <!-- With Description -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Description</h3>
+          <Button @click="withDescription = true">Open Drawer</Button>
+          <Drawer
+            v-model:visible="withDescription"
+            title="Edit Profile"
+            description="Update your personal information. Changes will be visible to other users immediately."
+            showCancel
+            confirmText="Save"
+          >
+            <div class="space-y-3">
+              <Input placeholder="Name" />
+              <Input placeholder="Email" />
+            </div>
+          </Drawer>
+        </section>
+
+        <!-- Scrollable Content -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Scrollable Content</h3>
+          <Button @click="scrollable = true">Open Drawer</Button>
+          <Drawer v-model:visible="scrollable" title="Terms of Service" showCancel confirmText="Accept">
+            <div class="space-y-4">
+              <p v-for="i in 20" :key="i">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
+              </p>
+            </div>
+          </Drawer>
+        </section>
+
+        <!-- Side Variants -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Side</h3>
+          <div class="flex gap-2">
+            <Button variant="outline" @click="sideTop = true">Top</Button>
+            <Button variant="outline" @click="sideRight = true">Right</Button>
+            <Button variant="outline" @click="sideBottom = true">Bottom</Button>
+            <Button variant="outline" @click="sideLeft = true">Left</Button>
+          </div>
+          <Drawer v-model:visible="sideTop" side="top" title="Top Drawer">
+            <p>Slides in from the top.</p>
+          </Drawer>
+          <Drawer v-model:visible="sideRight" side="right" title="Right Drawer">
+            <p>Slides in from the right.</p>
+          </Drawer>
+          <Drawer v-model:visible="sideBottom" side="bottom" title="Bottom Drawer">
+            <p>Slides in from the bottom.</p>
+          </Drawer>
+          <Drawer v-model:visible="sideLeft" side="left" title="Left Drawer">
+            <p>Slides in from the left.</p>
+          </Drawer>
+        </section>
+      </div>
+    `,
+  }),
+}