@polymarbot/nuxt-layer-shadcn-ui 0.4.0 → 0.4.2

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

@@ -12,13 +12,13 @@ const meta = {
     color: { control: 'select', options: colors },
     variant: { control: 'select', options: variants },
     active: { control: 'boolean' },
-    selectable: { control: 'boolean' },
+    clickable: { control: 'boolean' },
   },
   args: {
     color: 'default',
     variant: 'soft',
     active: false,
-    selectable: false,
+    clickable: false,
   },
   render: args => ({
     components: { Surface },
@@ -110,7 +110,7 @@ export const VariantColorMatrix: Story = {
           :key="c"
           :variant="v"
           :color="c"
-          selectable
+          clickable
           :active="selected === keyFor(v, c)"
           class="p-4"
           @click="selected = keyFor(v, c)"
@@ -147,7 +147,7 @@ const keyFor = (v: string, c: string) => \`\${v}:\${c}\`
               :key="c"
               :variant="v"
               :color="c"
-              selectable
+              clickable
               :active="selected === keyFor(v, c)"
               class="p-4"
               @click="selected = keyFor(v, c)"

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

@@ -25,7 +25,7 @@ const surfaceVariants = cva(
         true: 'ring-[3px]',
         false: '',
       },
-      selectable: {
+      clickable: {
         true: 'cursor-pointer transition-colors',
         false: '',
       },
@@ -109,89 +109,89 @@ const surfaceVariants = cva(
       { active: true, color: 'help', class: 'border-help ring-help/50' },
       { active: true, color: 'warn', class: 'border-warn ring-warn/50' },
       { active: true, color: 'danger', class: 'border-danger ring-danger/50' },
-      // selectable — hover bg, one step up the variant's intensity ladder
-      { selectable: true, variant: 'solid', color: 'default', class: `
+      // clickable — hover bg, one step up the variant's intensity ladder
+      { clickable: true, variant: 'solid', color: 'default', class: `
         hover:bg-accent/80
       ` },
-      { selectable: true, variant: 'solid', color: 'primary', class: `
+      { clickable: true, variant: 'solid', color: 'primary', class: `
         hover:bg-primary/90
       ` },
-      { selectable: true, variant: 'solid', color: 'success', class: `
+      { clickable: true, variant: 'solid', color: 'success', class: `
         hover:bg-success/90
       ` },
-      { selectable: true, variant: 'solid', color: 'info', class: `
+      { clickable: true, variant: 'solid', color: 'info', class: `
         hover:bg-info/90
       ` },
-      { selectable: true, variant: 'solid', color: 'help', class: `
+      { clickable: true, variant: 'solid', color: 'help', class: `
         hover:bg-help/90
       ` },
-      { selectable: true, variant: 'solid', color: 'warn', class: `
+      { clickable: true, variant: 'solid', color: 'warn', class: `
         hover:bg-warn/90
       ` },
-      { selectable: true, variant: 'solid', color: 'danger', class: `
+      { clickable: true, variant: 'solid', color: 'danger', class: `
         hover:bg-danger/90
       ` },
-      { selectable: true, variant: 'soft', color: 'default', class: `
+      { clickable: true, variant: 'soft', color: 'default', class: `
         hover:bg-secondary/70
       ` },
-      { selectable: true, variant: 'soft', color: 'primary', class: `
+      { clickable: true, variant: 'soft', color: 'primary', class: `
         hover:bg-primary/20
       ` },
-      { selectable: true, variant: 'soft', color: 'success', class: `
+      { clickable: true, variant: 'soft', color: 'success', class: `
         hover:bg-success/20
       ` },
-      { selectable: true, variant: 'soft', color: 'info', class: `
+      { clickable: true, variant: 'soft', color: 'info', class: `
         hover:bg-info/20
       ` },
-      { selectable: true, variant: 'soft', color: 'help', class: `
+      { clickable: true, variant: 'soft', color: 'help', class: `
         hover:bg-help/20
       ` },
-      { selectable: true, variant: 'soft', color: 'warn', class: `
+      { clickable: true, variant: 'soft', color: 'warn', class: `
         hover:bg-warn/20
       ` },
-      { selectable: true, variant: 'soft', color: 'danger', class: `
+      { clickable: true, variant: 'soft', color: 'danger', class: `
         hover:bg-danger/20
       ` },
-      { selectable: true, variant: 'bordered', color: 'default', class: `
-        hover:bg-accent
+      { clickable: true, variant: 'bordered', color: 'default', class: `
+        hover:bg-accent/50
       ` },
-      { selectable: true, variant: 'bordered', color: 'primary', class: `
+      { clickable: true, variant: 'bordered', color: 'primary', class: `
         hover:bg-primary/10
       ` },
-      { selectable: true, variant: 'bordered', color: 'success', class: `
+      { clickable: true, variant: 'bordered', color: 'success', class: `
         hover:bg-success/10
       ` },
-      { selectable: true, variant: 'bordered', color: 'info', class: `
+      { clickable: true, variant: 'bordered', color: 'info', class: `
         hover:bg-info/10
       ` },
-      { selectable: true, variant: 'bordered', color: 'help', class: `
+      { clickable: true, variant: 'bordered', color: 'help', class: `
         hover:bg-help/10
       ` },
-      { selectable: true, variant: 'bordered', color: 'warn', class: `
+      { clickable: true, variant: 'bordered', color: 'warn', class: `
         hover:bg-warn/10
       ` },
-      { selectable: true, variant: 'bordered', color: 'danger', class: `
+      { clickable: true, variant: 'bordered', color: 'danger', class: `
         hover:bg-danger/10
       ` },
-      { selectable: true, variant: 'flat', color: 'default', class: `
+      { clickable: true, variant: 'flat', color: 'default', class: `
         hover:bg-secondary/70
       ` },
-      { selectable: true, variant: 'flat', color: 'primary', class: `
+      { clickable: true, variant: 'flat', color: 'primary', class: `
         hover:bg-primary/20
       ` },
-      { selectable: true, variant: 'flat', color: 'success', class: `
+      { clickable: true, variant: 'flat', color: 'success', class: `
         hover:bg-success/20
       ` },
-      { selectable: true, variant: 'flat', color: 'info', class: `
+      { clickable: true, variant: 'flat', color: 'info', class: `
         hover:bg-info/20
       ` },
-      { selectable: true, variant: 'flat', color: 'help', class: `
+      { clickable: true, variant: 'flat', color: 'help', class: `
         hover:bg-help/20
       ` },
-      { selectable: true, variant: 'flat', color: 'warn', class: `
+      { clickable: true, variant: 'flat', color: 'warn', class: `
         hover:bg-warn/20
       ` },
-      { selectable: true, variant: 'flat', color: 'danger', class: `
+      { clickable: true, variant: 'flat', color: 'danger', class: `
         hover:bg-danger/20
       ` },
     ],
@@ -199,7 +199,7 @@ const surfaceVariants = cva(
       variant: 'soft',
       color: 'default',
       active: false,
-      selectable: false,
+      clickable: false,
     },
   },
 )
@@ -208,7 +208,7 @@ const props = withDefaults(defineProps<SurfaceProps>(), {
   color: 'default',
   variant: 'soft',
   active: false,
-  selectable: false,
+  clickable: false,
   class: undefined,
 })
 
@@ -218,7 +218,7 @@ const mergedClass = computed(() =>
       color: props.color,
       variant: props.variant,
       active: props.active,
-      selectable: props.selectable,
+      clickable: props.clickable,
     }),
     props.class,
   ),

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

@@ -4,7 +4,7 @@ export type SurfaceVariant = 'solid' | 'soft' | 'bordered' | 'flat'
 export interface SurfaceProps {
   color?: SurfaceColor
   variant?: SurfaceVariant
-  selectable?: boolean
+  clickable?: boolean
   active?: boolean
   class?: ClassValue
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polymarbot/nuxt-layer-shadcn-ui",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Nuxt layer providing shadcn-vue based UI components",
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -42,5 +42,5 @@
     "vue-i18n": "^11",
     "vue-router": "^4 || ^5"
   },
-  "gitHead": "7002e8d3028a6ac324296d4657cb313d7ed888e7"
+  "gitHead": "704765b43899093b99abeeb363fc417bef1135f9"
 }