@saasmakers/ui 2.0.65 → 2.0.67

package/app/components/bases/BaseRing.vue

@@ -2,7 +2,6 @@
 import type { BaseRing } from '../../types/bases'
 
 const props = withDefaults(defineProps<BaseRing>(), {
-  clickable: false,
   completed: 0,
   dashed: false,
   format: 'count',
@@ -11,10 +10,6 @@ const props = withDefaults(defineProps<BaseRing>(), {
   transitionColors: false,
 })
 
-const emit = defineEmits<{
-  click: [event: MouseEvent]
-}>()
-
 const sizes = {
   base: {
     inset: 1,
@@ -71,8 +66,11 @@ const centerLabel = computed(() => {
   return String(clampedCompleted.value)
 })
 
-// Visual gap (in viewBox units) between segments, widened for fewer steps.
 function gapForTotal(total: number) {
+  if (total <= 1) {
+    return 0
+  }
+
   if (total <= 4) {
     return 3
   }
@@ -136,24 +134,10 @@ const ringArcs = computed(() => {
 
   return arcs
 })
-
-function onClick(event: MouseEvent) {
-  if (props.clickable) {
-    emit('click', event)
-  }
-}
 </script>
 
 <template>
-  <component
-    :is="clickable ? 'button' : 'div'"
-    class="inline-flex"
-    :aria-expanded="expanded"
-    :aria-label="label"
-    :class="{ 'cursor-pointer': clickable }"
-    :type="clickable ? 'button' : undefined"
-    @click="onClick"
-  >
+  <div class="inline-flex">
     <svg
       class="size-full"
       :height="geometry.size"
@@ -185,7 +169,7 @@ function onClick(event: MouseEvent) {
       />
 
       <text
-        v-if="centerLabel && expanded !== false"
+        v-if="centerLabel"
         class="fill-gray-600 font-bold tabular-nums dark:fill-gray-400"
         :class="{
           'text-2xs': size === 'base' || size === 'sm',
@@ -199,5 +183,5 @@ function onClick(event: MouseEvent) {
         {{ centerLabel }}
       </text>
     </svg>
-  </component>
+  </div>
 </template>

package/app/types/bases.d.ts

@@ -297,12 +297,9 @@ export type BaseQuoteBackground = 'gray' | 'gray-light' | 'white'
 export type BaseQuoteSize = 'base' | 'sm' | 'xs'
 
 export interface BaseRing {
-  clickable?: boolean
   completed?: number
   dashed?: boolean
-  expanded?: boolean
   format?: BaseRingFormat
-  label?: string
   size?: BaseRingSize
   total?: number
   transitionColors?: boolean

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "2.0.65",
+  "version": "2.0.67",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",

package/uno.config.ts

@@ -38,6 +38,9 @@ export const shortcuts: Record<string, string> = {
   'base-box': 'border shadow-sm base-border rounded-lg',
   'base-highlight-indigo': 'border border-indigo-600/35 bg-indigo-600/[0.08] shadow-indigo-600/15 dark:border-indigo-400/35 dark:bg-indigo-400/[0.08] dark:shadow-indigo-400/15',
   'base-surface': 'border base-border base-bg shadow-sm',
+  'base-text-border': 'text-gray-200 dark:text-gray-800',
+  'base-text-border-group-hover': 'group-hover:text-gray-300 dark:group-hover:text-gray-700',
+  'base-text-border-hover': 'hover:text-gray-300 dark:hover:text-gray-700',
   'field-disabled': 'opacity-50 cursor-not-allowed',
   'field-uppercase': 'uppercase [&_*]:uppercase [&_input::placeholder]:uppercase',
   'scroll-y-stable': 'overflow-y-auto [scrollbar-gutter:stable]',