@saasmakers/ui 0.1.90 → 0.1.92

package/app/components/fields/FieldInput.vue

@@ -162,7 +162,7 @@ defineExpose({ focus })
           'text-right': alignment === 'right',
           'bg-gray-100 dark:bg-gray-900': background === 'gray',
           'bg-white dark:bg-gray-900': background === 'white',
-          'border shadow-sm border-gray-200 dark:border-gray-800 px-4 hover:border-gray-300 focus:border-gray-400 dark:hover:border-gray-700 dark:focus:border-gray-600': border === 'full',
+          'border shadow-sm border-gray-200 dark:border-gray-800 px-3 hover:border-gray-300 focus:border-gray-400 dark:hover:border-gray-700 dark:focus:border-gray-600': border === 'full',
           'border-b border-gray-200 dark:border-gray-800 px-10': border === 'bottom',
           'border-0 p-0': border === 'none',
           'text-xs': size === 'xs',

package/app/components/fields/FieldSelect.vue

@@ -168,7 +168,7 @@ function onOptionClick(event: MouseEvent, option: FieldSelectOption) {
             'border-gray-400 dark:border-gray-600': opened,
             'hover:border-gray-300 dark:hover:border-gray-700': !opened,
             'focus:border-gray-400 dark:focus:border-gray-600': !disabled,
-            'px-4': padding,
+            'px-3': padding,
             'text-2xs h-8': size === 'xs',
             'text-xs h-10': size === 'sm',
             'text-sm h-12': size === 'base',
@@ -248,7 +248,7 @@ function onOptionClick(event: MouseEvent, option: FieldSelectOption) {
                 :key="option.value"
                 class="group flex cursor-pointer items-center outline-none"
                 :class="{
-                  'border-b border-gray-200 dark:border-gray-800 px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-900 last:border-b-0': computedColumns.length < 2,
+                  'border-b border-gray-200 dark:border-gray-800 p-3 hover:bg-gray-100 dark:hover:bg-gray-900 last:border-b-0': computedColumns.length < 2,
                   'px-2 py-1 last:mb-2': computedColumns.length >= 2,
                   'font-medium underline': selectedOption && option.value === selectedOption.value,
                   'text-gray-900 dark:text-gray-100': selectedOption && option.value === selectedOption.value,

package/app/components/fields/FieldTabs.vue

@@ -33,7 +33,7 @@ function onTabClick(event: MouseEvent, tabValue: string) {
 
 <template>
   <div
-    class="item-center flex border border-gray-300 shadow-inner dark:border-gray-700"
+    class="flex items-center border border-gray-300 shadow-inner dark:border-gray-700"
     :class="{
       'gap-0 border-b border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-900': theme === 'border',
       'gap-2 rounded-lg bg-gray-200 dark:bg-gray-800 p-0.5 sm:p-1': theme === 'rounded',

package/app/components/fields/FieldTime.vue

@@ -20,6 +20,8 @@ const emit = defineEmits<{
   blur: [event: FocusEvent, value: string, name?: string]
 }>()
 
+const { getIcon } = useLayerIcons()
+
 const modelValue = defineModel<FieldTime['modelValue']>({ default: '' })
 
 const uuid = ref(`${Math.floor((1 + Math.random()) * 0x100000)}`)
@@ -42,7 +44,18 @@ function onFieldBlur(event: FocusEvent) {
       :size="size"
     />
 
-    <div class="item-center h-[42px] flex overflow-hidden border border-gray-200 rounded-lg pl-3 pr-2 dark:border-gray-800 focus-within:border-gray-400 hover:border-gray-300 dark:focus-within:border-gray-600 dark:hover:border-gray-700">
+    <div
+      class="h-[42px] flex items-center gap-2 overflow-hidden border border-gray-200 rounded-lg px-3 dark:border-gray-800 focus-within:border-gray-400 hover:border-gray-300 dark:focus-within:border-gray-600 dark:hover:border-gray-700"
+      :class="{
+        'bg-gray-100 dark:bg-gray-900': background === 'gray',
+        'bg-white dark:bg-gray-900': background === 'white',
+      }"
+    >
+      <BaseIcon
+        :icon="getIcon('clock')"
+        :size="size"
+      />
+
       <input
         :id="`${id}`"
         v-model="modelValue"

package/app/composables/useLayerIcons.ts

@@ -14,6 +14,7 @@ const icons = {
   arrowUp: 'solar:alt-arrow-up-bold',
   back: 'hugeicons:arrow-turn-backward',
   checkCircle: 'hugeicons:checkmark-circle-02',
+  clock: 'solar:alarm-linear',
   close: 'hugeicons:cancel-01',
   closeCircle: 'hugeicons:cancel-circle',
   default: 'hugeicons:help-circle',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasmakers/ui",
   "type": "module",
-  "version": "0.1.90",
+  "version": "0.1.92",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -29,7 +29,7 @@
     "@capacitor/preferences": "7.0.2",
     "@nuxt/icon": "2.1.1",
     "@nuxt/scripts": "0.13.2",
-    "@nuxtjs/color-mode": "4.0.0",
+    "@nuxtjs/color-mode": "3.5.2",
     "@nuxtjs/i18n": "10.2.1",
     "@nuxtjs/plausible": "2.0.1",
     "@nuxtjs/robots": "5.6.7",
@@ -63,7 +63,7 @@
   "scripts": {
     "dev": "nuxi dev",
     "lint": "eslint .",
-    "storybook": "storybook dev",
+    "storybook": "storybook dev -p 6006",
     "typecheck": "nuxi typecheck"
   }
 }