@polymarbot/nuxt-layer-shadcn-ui 0.8.4 → 0.8.6

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

@@ -137,7 +137,9 @@ function formatCellValue (value: unknown, column: DataTableColumn): string {
       return formatDateTime((value as number) * 1000).split(' ').join('\n')
 
     case 'currency':
-      return formatCurrency(value as number | string, column.currency ?? 'JPY')
+      return formatCurrency(value as number | string, column.currency ?? 'USD', {
+        currencyDisplay: column.currencyDisplay,
+      })
 
     case 'empty':
       return ''

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

@@ -24,6 +24,8 @@ export interface DataTableColumn {
   sortable?: boolean
   /** Currency code for 'currency' type (e.g., 'USD', 'JPY'). Default: 'USD' */
   currency?: string
+  /** How to display the currency for 'currency' type. Default: 'symbol' */
+  currencyDisplay?: 'symbol' | 'narrowSymbol' | 'code' | 'name'
   /** Custom class applied to the body cell (`<td>`) container */
   class?: string
   /** Custom class applied to the header cell (`<th>`) container */

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

@@ -2,7 +2,7 @@
 import type { InputCurrencyProps } from './types'
 
 const props = withDefaults(defineProps<InputCurrencyProps>(), {
-  currency: 'JPY',
+  currency: 'USD',
   currencyDisplay: 'symbol',
 })
 

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import EventLog from '#storybook/EventLog.vue'
 import { useArgsModel } from '#storybook/argsModel'
+import InputCurrency from '../InputCurrency/index.vue'
 import InputRange from './index.vue'
 
 const meta = {
@@ -14,6 +15,7 @@ const meta = {
     startPlaceholder: { control: 'text' },
     endPlaceholder: { control: 'text' },
     disabled: { control: 'boolean' },
+    as: { control: false },
   },
   args: {
     start: undefined,
@@ -23,6 +25,7 @@ const meta = {
     startPlaceholder: '',
     endPlaceholder: '',
     disabled: false,
+    as: undefined,
   },
   render: args => {
     const onUpdateStart = useArgsModel('start')
@@ -68,6 +71,44 @@ export const Disabled: Story = {
   },
 }
 
+export const CustomInput: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <InputRange
+    v-model:start="start"
+    v-model:end="end"
+    :as="InputCurrency"
+    currency="JPY"
+  />
+</template>
+`.trim(),
+      },
+    },
+  },
+  render: () => ({
+    components: { InputRange },
+    setup: () => ({
+      start: ref<number | undefined>(1000),
+      end: ref<number | undefined>(5000),
+      InputCurrency,
+    }),
+    template: `
+      <div class="max-w-md">
+        <InputRange
+          v-model:start="start"
+          v-model:end="end"
+          :as="InputCurrency"
+          currency="JPY"
+        />
+      </div>
+    `,
+  }),
+}
+
 export const EventHandling: Story = {
   parameters: noControls,
   render: () => ({

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import InputNumber from '../InputNumber/index.vue'
 import type { InputRangeProps } from './types'
 
 defineOptions({ inheritAttrs: false })
@@ -10,8 +11,11 @@ const props = withDefaults(defineProps<InputRangeProps>(), {
   max: undefined,
   startPlaceholder: undefined,
   endPlaceholder: undefined,
+  as: undefined,
 })
 
+const inputComponent = computed(() => props.as ?? InputNumber)
+
 const emit = defineEmits<{
   'update:start': [value: number | undefined]
   'update:end': [value: number | undefined]
@@ -33,7 +37,8 @@ const end = computed({
 
 <template>
   <div class="gap-2 flex items-center">
-    <InputNumber
+    <component
+      :is="inputComponent"
       v-model="start"
       v-bind="$attrs"
       :min="min"
@@ -44,7 +49,8 @@ const end = computed({
     <span class="leading-0 text-muted-foreground">
       {{ t('common.symbols.connector') }}
     </span>
-    <InputNumber
+    <component
+      :is="inputComponent"
       v-model="end"
       v-bind="$attrs"
       :min="start ?? min"

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

@@ -1,3 +1,4 @@
+import type { Component } from 'vue'
 import type { InputNumberProps } from '../InputNumber/types'
 
 export interface InputRangeProps extends /* @vue-ignore */ InputNumberProps {
@@ -9,4 +10,6 @@ export interface InputRangeProps extends /* @vue-ignore */ InputNumberProps {
   startPlaceholder?: string
   /** Placeholder for end input */
   endPlaceholder?: string
+  /** Inner input component. Defaults to `InputNumber`; can be replaced with `InputCurrency`, `InputPercent`, etc. */
+  as?: Component
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polymarbot/nuxt-layer-shadcn-ui",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "description": "Nuxt layer providing shadcn-vue based UI components",
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@polymarbot/nuxt-layer-basic": "^0.1",
-    "@polymarbot/uitls-shared": "^0.5",
+    "@polymarbot/uitls-shared": "^0.5.1",
     "@tanstack/vue-table": "^8.21.3",
     "@types/lodash-es": "^4.17.12",
     "@types/qrcode": "^1.5.6",
@@ -42,5 +42,5 @@
     "vue-i18n": "^11",
     "vue-router": "^4 || ^5"
   },
-  "gitHead": "d561383c133bd4f981cc2c289fbc675bcdaec917"
+  "gitHead": "c2aa82c36486efc10b9d5723fcd49bb764f473d9"
 }