pimelon-ui 0.1.79 → 0.1.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pimelon-ui",
-  "version": "0.1.79",
+  "version": "0.1.81",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {

package/src/components/Dropdown.vue

@@ -136,12 +136,19 @@ const filterOptions = (options: DropdownOption[]) => {
 
 const groups = computed(() => {
   let groups: DropdownGroupOption[] = []
+  let currentGroup: DropdownGroupOption | null = null
   let i = 0
+
   for (let option of props.options) {
     if (option == null) {
       continue
     }
+
     if ('group' in option) {
+      if (currentGroup) {
+        groups.push(currentGroup)
+        currentGroup = null
+      }
       let groupOption = {
         key: i,
         ...option,
@@ -149,16 +156,23 @@ const groups = computed(() => {
       } as DropdownGroupOption
       groups.push(groupOption)
     } else {
-      let groupOption = {
-        key: i,
-        group: '',
-        hideLabel: true,
-        items: filterOptions([option]),
-      } as DropdownGroupOption
-      groups.push(groupOption)
+      if (!currentGroup) {
+        currentGroup = {
+          key: i,
+          group: '',
+          hideLabel: true,
+          items: [],
+        } as DropdownGroupOption
+      }
+      currentGroup.items.push(...filterOptions([option]))
     }
     i++
   }
+
+  if (currentGroup) {
+    groups.push(currentGroup)
+  }
+
   return groups
 })
 

package/src/tailwind/colors.js

@@ -462,8 +462,8 @@ function themedCssVariables() {
       '--surface-cards': darkModeColors.gray[800],
       '--surface-cyan-1': darkModeColors.cyan[900],
       '--surface-gray-1': darkModeColors.gray[700],
-      '--surface-gray-2': whiteOverlay[50],
-      '--surface-gray-3': whiteOverlay[100],
+      '--surface-gray-2': darkModeColors.gray[650],
+      '--surface-gray-3': darkModeColors.gray[600],
       '--surface-gray-4': darkModeColors.gray[500],
       '--surface-gray-5': darkModeColors.gray[100],
       '--surface-gray-6': darkModeColors.gray[200],

package/src/tailwind/plugin.js

@@ -219,6 +219,13 @@ module.exports = plugin(
         stroke: {
           ink: semanticColors.ink,
         },
+        borderColor: (theme) => ({
+          DEFAULT: theme('colors.gray.200'),
+          outline: semanticColors.outline,
+        }),
+        ringColor: {
+          outline: semanticColors.outline,
+        },
         spacing: {
           4.5: '1.125rem',
           5.5: '1.375rem',
@@ -250,10 +257,6 @@ module.exports = plugin(
         maxHeight: {
           52: '13rem',
         },
-        borderColor: (theme) => ({
-          DEFAULT: theme('colors.gray.200'),
-          outline: semanticColors.outline,
-        }),
         typography: (theme) => ({
           DEFAULT: {
             css: {