@polymarbot/nuxt-layer-shadcn-ui 0.1.0

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

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import InputNumber from './index.vue'
+
+const meta = {
+  title: 'UI/InputNumber',
+  component: InputNumber,
+  argTypes: {
+    disabled: { control: 'boolean' },
+    invalid: { control: 'boolean' },
+    showButtons: { control: 'boolean' },
+  },
+  args: {
+    disabled: false,
+    invalid: false,
+    showButtons: true,
+  },
+} satisfies Meta<typeof InputNumber>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { InputNumber },
+    setup () {
+      const basic = ref(0)
+      const minMax = ref(5)
+      const stepped = ref(0)
+      return { args, basic, minMax, stepped }
+    },
+    template: `
+      <div class="space-y-10 max-w-xs">
+        <!-- Controlled -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
+          <InputNumber v-model="basic" v-bind="args" />
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ basic }}</div>
+        </section>
+
+        <!-- With Min / Max -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Min / Max (0 - 10)</h3>
+          <InputNumber v-model="minMax" :min="0" :max="10" />
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ minMax }}</div>
+        </section>
+
+        <!-- Custom Step -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Custom Step (5)</h3>
+          <InputNumber v-model="stepped" :step="5" />
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ stepped }}</div>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import {
+  NumberField,
+  NumberFieldContent,
+  NumberFieldDecrement,
+  NumberFieldIncrement,
+  NumberFieldInput,
+} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/number-field'
+import type { InputNumberProps } from './types'
+
+const props = withDefaults(defineProps<InputNumberProps>(), {
+  modelValue: undefined,
+  min: undefined,
+  max: undefined,
+  step: 1,
+  disabled: false,
+  showButtons: true,
+  placeholder: undefined,
+  invalid: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | undefined]
+}>()
+
+const model = computed({
+  get: () => props.modelValue,
+  set: value => emit('update:modelValue', value),
+})
+
+const contentClass = computed(() =>
+  cn(
+    `
+      flex h-9 items-center rounded-md border border-input shadow-xs
+      transition-[color,box-shadow]
+      dark:bg-input/30
+    `,
+    `
+      has-[[data-slot=input]:focus-visible]:border-ring
+      has-[[data-slot=input]:focus-visible]:ring-[3px]
+      has-[[data-slot=input]:focus-visible]:ring-ring/50
+    `,
+    props.invalid && `
+      border-destructive ring-destructive/20
+      dark:ring-destructive/40
+    `,
+  ),
+)
+
+const inputClass = 'flex-1 border-0 shadow-none focus-visible:ring-0 rounded-none'
+</script>
+
+<template>
+  <NumberField
+    v-model="model"
+    :min="min"
+    :max="max"
+    :step="step"
+    :disabled="disabled"
+  >
+    <NumberFieldContent :class="contentClass">
+      <NumberFieldDecrement
+        v-if="showButtons"
+        class="cursor-pointer"
+      />
+      <NumberFieldInput
+        :placeholder="placeholder"
+        :class="inputClass"
+      />
+      <NumberFieldIncrement
+        v-if="showButtons"
+        class="cursor-pointer"
+      />
+    </NumberFieldContent>
+  </NumberField>
+</template>

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

@@ -0,0 +1,10 @@
+export interface InputNumberProps {
+  modelValue?: number
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+  showButtons?: boolean
+  placeholder?: string
+  invalid?: boolean
+}

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

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import InputOtp from './index.vue'
+
+const meta = {
+  title: 'UI/InputOtp',
+  component: InputOtp,
+  argTypes: {
+    disabled: { control: 'boolean' },
+    length: { control: 'number' },
+  },
+  args: {
+    disabled: false,
+    length: 6,
+  },
+} satisfies Meta<typeof InputOtp>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { InputOtp },
+    setup () {
+      const otp = ref('')
+      const completed = ref('')
+      function onComplete (value: string) {
+        completed.value = value
+      }
+      return { args, otp, completed, onComplete }
+    },
+    template: `
+      <div class="space-y-4">
+        <InputOtp v-model="otp" v-bind="args" @complete="onComplete" />
+        <div class="text-sm text-muted-foreground">Value: {{ otp }}</div>
+        <div v-if="completed" class="text-sm text-success">Completed: {{ completed }}</div>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import {
+  PinInput,
+  PinInputGroup,
+  PinInputSlot,
+} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/pin-input'
+import type { InputOtpProps } from './types'
+
+withDefaults(defineProps<InputOtpProps>(), {
+  modelValue: '',
+  length: 6,
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'complete': [value: string]
+}>()
+
+function handleComplete (values: string[]) {
+  emit('complete', values.join(''))
+}
+
+function handleUpdate (value: string[]) {
+  emit('update:modelValue', value.join(''))
+}
+
+</script>
+
+<template>
+  <PinInput
+    :modelValue="modelValue.split('')"
+    :disabled="disabled"
+    @update:modelValue="handleUpdate"
+    @complete="handleComplete"
+  >
+    <PinInputGroup>
+      <PinInputSlot
+        v-for="(_, index) in length"
+        :key="index"
+        :index="index"
+      />
+    </PinInputGroup>
+  </PinInput>
+</template>

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

@@ -0,0 +1,5 @@
+export interface InputOtpProps {
+  modelValue?: string
+  length?: number
+  disabled?: boolean
+}

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

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import InputPercent from './index.vue'
+
+const meta = {
+  title: 'UI/InputPercent',
+  component: InputPercent,
+  argTypes: {
+    disabled: { control: 'boolean' },
+  },
+  args: {
+    disabled: false,
+  },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { InputPercent },
+    setup () {
+      const percent = ref(0.5)
+      return { args, percent }
+    },
+    template: `
+      <div class="max-w-xs space-y-4">
+        <InputPercent v-model="percent" v-bind="args" />
+        <div class="text-sm text-muted-foreground">Value: {{ percent }}</div>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,8 @@
+<template>
+  <InputNumber
+    :formatOptions="{ style: 'percent' }"
+    :step="0.01"
+    :min="0"
+    :max="1"
+  />
+</template>

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

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import InputRange from './index.vue'
+
+const meta = {
+  title: 'UI/InputRange',
+  component: InputRange,
+  argTypes: {
+    disabled: { control: 'boolean' },
+    min: { control: 'number' },
+    max: { control: 'number' },
+  },
+  args: {
+    disabled: false,
+    min: 0,
+    max: 100,
+  },
+} satisfies Meta<typeof InputRange>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { InputRange },
+    setup () {
+      const start = ref(20)
+      const end = ref(80)
+      return { args, start, end }
+    },
+    template: `
+      <div class="max-w-md">
+        <InputRange v-model:start="start" v-model:end="end" v-bind="args" />
+        <div class="mt-2 text-sm text-muted-foreground">Start: {{ start }}, End: {{ end }}</div>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { InputRangeProps } from './types'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<InputRangeProps>(), {
+  start: undefined,
+  end: undefined,
+  min: 0,
+  max: 100,
+})
+
+const emit = defineEmits<{
+  'update:start': [value: number | undefined]
+  'update:end': [value: number | undefined]
+}>()
+
+const start = computed({
+  get: () => props.start,
+  set: value => emit('update:start', value),
+})
+
+const end = computed({
+  get: () => props.end,
+  set: value => emit('update:end', value),
+})
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <InputNumber
+      v-model="start"
+      v-bind="$attrs"
+      :min="min"
+      :max="end ?? max"
+      fluid
+    />
+    <span class="leading-0 text-muted-foreground">
+      -
+    </span>
+    <InputNumber
+      v-model="end"
+      v-bind="$attrs"
+      :min="start ?? min"
+      :max="max"
+      fluid
+    />
+  </div>
+</template>

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

@@ -0,0 +1,8 @@
+import type { InputNumberProps } from '../InputNumber/types'
+
+export interface InputRangeProps extends /* @vue-ignore */ InputNumberProps {
+  start?: number
+  end?: number
+  min?: number
+  max?: number
+}

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

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Loading from './index.vue'
+
+const meta = {
+  title: 'UI/Loading',
+  component: Loading,
+} satisfies Meta<typeof Loading>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { Loading },
+    setup: () => ({ args }),
+    template: `
+      <div class="space-y-10">
+        <!-- Default -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Default</h3>
+          <Loading />
+        </section>
+
+        <!-- Custom Size -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Custom Size</h3>
+          <div class="flex items-end gap-6">
+            <Loading class="size-6" />
+            <Loading class="size-10" />
+            <Loading class="size-16" />
+          </div>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { LoadingProps } from './types'
+
+const props = defineProps<LoadingProps>()
+const mergedClass = computed(() => cn(`
+  size-16 animate-spin text-muted-foreground
+`, props.class))
+</script>
+
+<template>
+  <Icon
+    name="loader-circle"
+    :class="mergedClass"
+  />
+</template>

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

@@ -0,0 +1,3 @@
+export interface LoadingProps {
+  class?: ClassValue
+}

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

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Markdown from './index.vue'
+
+const meta = {
+  title: 'UI/Markdown',
+  component: Markdown,
+  argTypes: {
+    hideTitle: { control: 'boolean' },
+  },
+  args: {
+    hideTitle: false,
+  },
+} satisfies Meta<typeof Markdown>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { Markdown },
+    setup () {
+      return { args }
+    },
+    template: `
+      <Markdown v-bind="args">
+        <h1>Document Title</h1>
+        <p>This is a paragraph with <strong>bold</strong> and <em>italic</em> text.</p>
+        <h2>Lists</h2>
+        <ul>
+          <li>First item</li>
+          <li>Second item</li>
+          <li>Third item with <a href="#">a link</a></li>
+        </ul>
+        <h2>Code</h2>
+        <pre><code>const greeting = 'Hello, world!'
+console.log(greeting)</code></pre>
+        <h2>Blockquote</h2>
+        <blockquote><p>This is a blockquote with some important information.</p></blockquote>
+        <h2>Table</h2>
+        <table>
+          <thead>
+            <tr><th>Name</th><th>Status</th></tr>
+          </thead>
+          <tbody>
+            <tr><td>Alpha</td><td>Active</td></tr>
+            <tr><td>Beta</td><td>Inactive</td></tr>
+          </tbody>
+        </table>
+      </Markdown>
+    `,
+  }),
+}

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { MarkdownProps } from './types'
+
+defineProps<MarkdownProps>()
+</script>
+
+<template>
+  <div
+    class="markdown-body"
+    :class="{ 'hide-title': hideTitle }"
+  >
+    <slot />
+  </div>
+</template>
+
+<style>
+@import './themes/github.css';
+
+.markdown-body.hide-title > h1:first-child {
+  display: none;
+}
+</style>