@wishbone-media/spark 0.14.0 → 0.15.0

package/formkit.theme.mjs

@@ -56,7 +56,7 @@ const classes = {
     'selection:text-slate-700': true,
     'group-data-has-overlay:selection:text-transparent!': true,
     'font-bold': true,
-    rounded: true,
+    "rounded-md": true,
     'outline-none': true,
     flex: true,
     'text-xs!': true,
@@ -211,7 +211,7 @@ const classes = {
     'w-full': true,
     'py-2.5': true,
     'px-3.5': true,
-    rounded: true,
+    "rounded-md": true,
     border: true,
     'border-slate-300': true,
     'bg-white': true,
@@ -241,7 +241,7 @@ const classes = {
     'text-sm': true,
     'text-slate-700': true,
     'min-w-0': true,
-    'min-h-[1.5em]': true,
+    'min-h-[20px]': true,
     grow: true,
     'outline-none': true,
     'bg-transparent': true,
@@ -290,7 +290,7 @@ const classes = {
     'bg-white': true,
     border: true,
     'border-slate-300': true,
-    rounded: true,
+    "rounded-md": true,
     'group-data-is-multiline:rounded!': true,
     'focus-within:ring-1': true,
     'focus-within:ring-primary-500!': true,
@@ -411,7 +411,7 @@ const classes = {
     'dark:text-slate-300': true,
   },
   'family:dropdown__dropdownWrapper': {
-    rounded: true,
+    "rounded-md": true,
     'shadow-md': true,
     'mt-1.5': true,
     'overflow-clip': true,
@@ -445,7 +445,7 @@ const classes = {
   },
   'family:dropdown__listbox': {
     'bg-white': true,
-    rounded: true,
+    "rounded-md": true,
     'empty:hidden': true,
     'dark:bg-slate-800': true,
     'group-data-overscroll:shadow-md': true,
@@ -528,7 +528,7 @@ const classes = {
   },
   'family:dropdown__tagWrapper': {
     'group/tag': true,
-    rounded: true,
+    "rounded-md": true,
     'mr-1.5': true,
     'mb-1.5': true,
     'outline-none': true,
@@ -547,7 +547,7 @@ const classes = {
     flex: true,
     'items-center': true,
     'cursor-default': true,
-    rounded: true,
+    "rounded-md": true,
     'text-xs': true,
     'px-2': true,
     'py-1': true,
@@ -589,7 +589,7 @@ const classes = {
     'dark:hover:bg-primary-50/5': true,
   },
   checkbox__decorator: {
-    rounded: true,
+    "rounded-md": true,
   },
   checkbox__decoratorIcon: {
     'max-w-[66.66%]': true,
@@ -615,7 +615,7 @@ const classes = {
     'w-14!': true,
     'bg-transparent': true,
     'cursor-pointer': true,
-    rounded: true,
+    "rounded-md": true,
     'overflow-clip': true,
     '[&::-webkit-color-swatch-wrapper]:p-0': true,
     '[&::-webkit-color-swatch]:border-none': true,
@@ -707,7 +707,7 @@ const classes = {
   file__fileRemove: {
     'right-2.5': true,
     'ring-primary-500': true,
-    rounded: true,
+    "rounded-md": true,
     'z-20': true,
     flex: true,
     'appearance-none': true,
@@ -780,7 +780,7 @@ const classes = {
     border: true,
     'border-slate-300': true,
     'bg-white': true,
-    rounded: true,
+    "rounded-md": true,
     'py-2.5': true,
     'px-3.5': true,
     'shadow-sm': false,
@@ -892,7 +892,7 @@ const classes = {
     'bg-white': true,
     border: true,
     'border-slate-300': true,
-    rounded: true,
+    "rounded-md": true,
     'focus-within:ring-1': true,
     'focus-within:ring-primary-500!': true,
     'focus-within:border-primary-500!': true,
@@ -1079,7 +1079,7 @@ const classes = {
     'bg-white': true,
     border: true,
     'border-slate-300': true,
-    rounded: true,
+    "rounded-md": true,
     'focus-within:ring-1': true,
     'focus-within:ring-primary-500!': true,
     'focus-within:border-primary-500!': true,
@@ -1183,7 +1183,7 @@ const classes = {
   },
   autocomplete__selectionWrapper: {
     'bg-slate-100': true,
-    rounded: true,
+    "rounded-md": true,
     'group-data-multiple:border': true,
     'group-data-multiple:border-slate-200': true,
     'group-data-multiple:mb-2': true,
@@ -1198,7 +1198,7 @@ const classes = {
     '[&.formkit-longTouch]:opacity-25': true,
   },
   autocomplete__selection: {
-    rounded: true,
+    "rounded-md": true,
     just: true,
     'pl-2.5': true,
     '*:ml-0': true,
@@ -1243,7 +1243,7 @@ const classes = {
     flex: true,
     'justify-start': true,
     'items-center': true,
-    rounded: true,
+    "rounded-md": true,
     'text-sm': true,
     'cursor-pointer': true,
     'outline-none': true,
@@ -1259,7 +1259,7 @@ const classes = {
   },
   colorpicker__canvasSwatchPreview: {
     'text-sm': true,
-    rounded: true,
+    "rounded-md": true,
     'aspect-square': true,
     'shrink-0': true,
     grow: true,
@@ -1286,7 +1286,7 @@ const classes = {
     'max-w-[18.5em]': true,
     'touch-manipulation': true,
     'flex-col': true,
-    rounded: true,
+    "rounded-md": true,
     border: true,
     'bg-white': true,
     'p-2.5': true,
@@ -1334,7 +1334,7 @@ const classes = {
     'w-8': true,
     'aspect-square': true,
     'p-1': true,
-    rounded: true,
+    "rounded-md": true,
     border: true,
     '[&>svg]:w-full': true,
     '[&>svg]:aspect-square': true,
@@ -1367,7 +1367,7 @@ const classes = {
     'rounded-none': true,
   },
   colorpicker__preview: {
-    rounded: true,
+    "rounded-md": true,
     'after:rounded': true,
     relative: true,
     'inline-flex': true,
@@ -1406,7 +1406,7 @@ const classes = {
     'justify-center': true,
     'justify-self-center': true,
     'aspect-square': true,
-    rounded: true,
+    "rounded-md": true,
     border: true,
     'border-slate-200': true,
     'cursor-pointer': true,
@@ -1442,13 +1442,13 @@ const classes = {
     'w-[4px]': true,
     'h-[calc(100%-2px)]': true,
     'top-1/2': true,
-    rounded: true,
+    "rounded-md": true,
   },
   colorpicker__controlAlpha: {
     'w-[4px]': true,
     'h-[calc(100%-2px)]': true,
     'top-1/2': true,
-    rounded: true,
+    "rounded-md": true,
   },
   colorpicker__formatField: {
     flex: true,
@@ -1515,7 +1515,7 @@ const classes = {
     'p-1': true,
     'mt-0.5': true,
     'text-slate-600': true,
-    rounded: true,
+    "rounded-md": true,
     'select-none': true,
     'dark:text-slate-400': true,
   },
@@ -1627,7 +1627,7 @@ const classes = {
     'top-[calc(100%+0.5em)]': true,
     'left-0': true,
     'shadow-[0_0_1.25em_rgba(0,0,0,.25)]': true,
-    rounded: true,
+    "rounded-md": true,
     'p-5': true,
     'bg-white': true,
     'z-10': true,
@@ -1658,7 +1658,7 @@ const classes = {
     'aspect-square': true,
     border: true,
     'border-slate-200': true,
-    rounded: true,
+    "rounded-md": true,
     flex: true,
     'items-center': true,
     'justify-center': true,
@@ -1706,7 +1706,7 @@ const classes = {
     'p-1.5': true,
     'text-center': true,
     'text-slate-700': true,
-    rounded: true,
+    "rounded-md": true,
     'bg-slate-200': true,
     'aria-selected:bg-primary-600!': true,
     'aria-selected:text-white!': true,
@@ -1744,7 +1744,7 @@ const classes = {
     'items-center': true,
     'm-2': true,
     'p-1.5': true,
-    rounded: true,
+    "rounded-md": true,
     'bg-slate-200': true,
     'aria-selected:bg-primary-600!': true,
     'aria-selected:text-white!': true,
@@ -1768,7 +1768,7 @@ const classes = {
     'w-[2.25em]': true,
     'text-slate-700': true,
     'm-2': true,
-    rounded: true,
+    "rounded-md": true,
     'font-medium': true,
     lowercase: true,
     'dark:text-slate-500': true,
@@ -1793,7 +1793,7 @@ const classes = {
     'h-[2.25em]': true,
     'm-1': true,
     'p-2.5': true,
-    rounded: true,
+    "rounded-md": true,
     'bg-slate-200': true,
     'aria-selected:bg-primary-600': true,
     'aria-selected:text-white': true,
@@ -1821,7 +1821,7 @@ const classes = {
     'dark:scheme-dark': true,
     'text-slate-700': true,
     'border-slate-200': true,
-    rounded: true,
+    "rounded-md": true,
     'p-2': true,
     'my-3': true,
     'focus-visible:outline-primary-600': true,
@@ -1839,7 +1839,7 @@ const classes = {
     'px-3': true,
     'py-1': true,
     'hover:bg-slate-100': true,
-    rounded: true,
+    "rounded-md": true,
     'col-start-1': true,
     'col-end-1': true,
     'focus-visible:outline-none': true,
@@ -1866,7 +1866,7 @@ const classes = {
     'py-1': true,
     'border-2': true,
     'border-slate-200': true,
-    rounded: true,
+    "rounded-md": true,
     'mx-1': true,
     'hover:border-primary-600': true,
     'focus-visible:outline-none': true,
@@ -1885,7 +1885,7 @@ const classes = {
     'py-1': true,
     'border-2': true,
     'border-slate-200': true,
-    rounded: true,
+    "rounded-md": true,
     'mx-1': true,
     'hover:border-primary-600': true,
     'focus-visible:outline-none': true,
@@ -1904,7 +1904,7 @@ const classes = {
     'py-1': true,
     'border-2': true,
     'border-slate-200': true,
-    rounded: true,
+    "rounded-md": true,
     'mx-1': true,
     'hover:border-primary-600': true,
     'focus-visible:outline-none': true,
@@ -1919,7 +1919,7 @@ const classes = {
     'ml-auto': true,
     'px-3': true,
     'py-1': true,
-    rounded: true,
+    "rounded-md": true,
     'hover:bg-slate-100': true,
     'hover:rounded': true,
     'col-start-3': true,
@@ -2019,7 +2019,7 @@ const classes = {
     'items-center': true,
     'justify-center': true,
     'h-[1.5em]': true,
-    rounded: true,
+    "rounded-md": true,
     'bg-slate-400': true,
     'text-white': true,
     'whitespace-nowrap': true,
@@ -2161,7 +2161,7 @@ const classes = {
     'p-2.5': true,
     '[&>li]:aspect-square': true,
     'dark:bg-slate-800': true,
-    rounded: true,
+    "rounded-md": true,
     'rounded-tl-none': true,
     'rounded-bl-none': true,
   },
@@ -2257,7 +2257,7 @@ const classes = {
     'bg-white': true,
     border: true,
     'border-slate-200': true,
-    rounded: true,
+    "rounded-md": true,
     'shadow-sm': false,
     'dark:border-slate-700': true,
     'dark:bg-transparent': true,
@@ -2268,7 +2268,7 @@ const classes = {
     relative: true,
     'w-8': true,
     'bg-slate-50': true,
-    rounded: true,
+    "rounded-md": true,
     'rounded-tr-none': true,
     'rounded-br-none': true,
     'dark:bg-slate-800': true,
@@ -2454,7 +2454,7 @@ const classes = {
     'text-xs': true,
     'leading-none': true,
     'whitespace-nowrap': true,
-    rounded: true,
+    "rounded-md": true,
     'opacity-0': true,
     'pointer-events-none': true,
     'transition-opacity': true,
@@ -2757,7 +2757,7 @@ const classes = {
     'h-[350px]': true,
     border: true,
     'border-slate-200': true,
-    rounded: true,
+    "rounded-md": true,
     'overflow-hidden': true,
     'select-none': true,
     '[&:has(:focus-visible)]:ring-1': true,
@@ -2861,7 +2861,7 @@ const classes = {
     'sm:my-auto': true,
     'mx-auto': true,
     'sm:mx-2.5': true,
-    rounded: true,
+    "rounded-md": true,
     'overflow-clip': true,
     'shadow-none': true,
     'in-[.group\/repeater]:shadow-none': true,
@@ -2908,7 +2908,7 @@ const classes = {
     flex: true,
     border: true,
     'border-slate-200': true,
-    rounded: true,
+    "rounded-md": true,
     'items-center': true,
     'text-slate-700': true,
     'selection:bg-primary-100': true,
@@ -3039,7 +3039,7 @@ const classes = {
     'overflow-clip': true,
     'p-0': true,
     'bg-black': true,
-    rounded: true,
+    "rounded-md": true,
     'w-[100%-2rem]': true,
     'max-w-120': true,
     'backdrop:bg-slate-800/50': true,
@@ -3058,7 +3058,7 @@ const classes = {
     'color-slate-700': true,
     'w-[1.5em]': true,
     'h-[1.5em]': true,
-    rounded: true,
+    "rounded-md": true,
     flex: true,
     'top-2.5': true,
     'right-2.5': true,
@@ -3077,7 +3077,7 @@ const classes = {
     'aspect-square': true,
     '-translate-x-1/2': true,
     '-translate-y-1/2': true,
-    rounded: true,
+    "rounded-md": true,
     'pointer-events-none': true,
     'shadow-[0_0_0_999em_rgba(0,0,0,0.5)]': true,
   },
@@ -3090,7 +3090,7 @@ const classes = {
     absolute: true,
     'w-6': true,
     'h-6': true,
-    rounded: true,
+    "rounded-md": true,
     'top-0': true,
     'left-0': true,
     'border-l-4': true,
@@ -3102,7 +3102,7 @@ const classes = {
     absolute: true,
     'w-6': true,
     'h-6': true,
-    rounded: true,
+    "rounded-md": true,
     'top-0': true,
     'right-0': true,
     'border-r-4': true,
@@ -3114,7 +3114,7 @@ const classes = {
     absolute: true,
     'w-6': true,
     'h-6': true,
-    rounded: true,
+    "rounded-md": true,
     'bottom-0': true,
     'right-0': true,
     'border-r-4': true,
@@ -3126,7 +3126,7 @@ const classes = {
     absolute: true,
     'w-6': true,
     'h-6': true,
-    rounded: true,
+    "rounded-md": true,
     'bottom-0': true,
     'left-0': true,
     'border-l-4': true,
@@ -3271,7 +3271,7 @@ const classes = {
     'bg-white': true,
     border: true,
     'border-slate-200': true,
-    rounded: true,
+    "rounded-md": true,
     'dark:bg-transparent': true,
     'dark:border-slate-800': true,
     'group-data-[tab-style=tab]/wrapper:border-t-0': true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -23,8 +23,14 @@
     "@formkit/vue": "^1.6.9",
     "@fortawesome/fontawesome-svg-core": "^7.1.0",
     "@fortawesome/pro-regular-svg-icons": "^7.1.0",
+    "@fortawesome/vue-fontawesome": "^3.1.2",
+    "@handsontable/vue3": "^16.1.1",
     "@headlessui/vue": "^1.7.23",
+    "@vueuse/core": "^14.0.0",
     "axios": "^1.6.0",
+    "handsontable": "^16.1.1",
+    "lodash": "^4.17.21",
+    "nprogress": "^0.2.0",
     "pinia": "^3.0.4",
     "pinia-plugin-persistedstate": "^4.0.0",
     "vue": "^3.5.24",
@@ -48,6 +54,7 @@
     "./formkit.config.js": "./formkit.config.js",
     "./formkit.theme.mjs": "./formkit.theme.mjs",
     "./assets/css/*": "./src/assets/css/*",
+    "./assets/css/spark-table.css": "./src/assets/css/spark-table.css",
     "./assets/fonts/*": "./src/assets/fonts/*",
     "./assets/images/brands/*": "./src/assets/images/brands/*"
   },

package/src/assets/css/spark-table.css

@@ -0,0 +1,69 @@
+.spark-table-table {
+  tbody {
+    tr:nth-child(even) td {
+      @apply bg-gray-50;
+
+      &:not(.read-only) {
+        @apply bg-gray-50;
+      }
+    }
+
+    td {
+      @apply px-6 py-4 whitespace-nowrap text-gray-500 text-sm align-middle h-auto;
+      @apply !border-l-0 !border-r-0 !border-gray-200;
+
+      &:not(.read-only) {
+        @apply bg-gray-50;
+      }
+    }
+
+    td:not(:last-child) {
+      @apply !border-r-0;
+    }
+  }
+}
+
+.spark-table-table thead th {
+  @apply !border-t-0 !border-x-0;
+
+  &.ht__highlight .relative {
+    @apply bg-gray-200;
+  }
+
+  &.ht__active_highlight .relative {
+    @apply bg-blue-400 text-black;
+  }
+
+  & > .relative {
+    @apply text-left text-xs font-semibold bg-gray-50 text-gray-800 whitespace-normal
+        tracking-wider focus:outline-hidden drop-shadow-sm filter flex items-center;
+
+    @apply !px-5 !py-3;
+  }
+
+  .colHeader {
+    @apply leading-5;
+  }
+}
+
+.spark-table-head-title {
+  @apply max-w-full mr-4 overflow-hidden text-clip capitalize;
+
+  & > span {
+    @apply leading-normal;
+  }
+}
+
+.spark-table-action-button {
+  @apply px-3 py-[9px] text-sm shadow-xs rounded-md ring-1 ring-gray-300 ring-inset bg-white hover:bg-gray-50 text-gray-900;
+}
+
+.spark-table-head-filter {
+  /* hidden for now */
+  @apply hidden;
+}
+
+.spark-table-head-sorting {
+  /* hidden for now */
+  @apply hidden;
+}

package/src/components/SparkButton.vue

@@ -107,7 +107,7 @@ const computedButtonClass = computed(() => {
       roundingSize = 'md'
       break
     case 'xl':
-      classes += ' px-3.5 py-2.5 text-sm'
+      classes += ' px-3.5 py-2.5 min-h-[42px] text-sm'
       roundingSize = 'md'
       break
   }