@naptics/vue-collection 0.3.2 → 1.0.0-beta.2

package/{components → lib/components}/NAlert.js

@@ -38,13 +38,13 @@ const Component = createComponent('NAlert', nAlertProps, (props, {
   }, [_createVNode("div", {
     "class": "flex items-center"
   }, [_createVNode("div", {
-    "class": "flex flex-shrink-0 items-center"
+    "class": "flex shrink-0 items-center"
   }, [variant.value.icon()]), _createVNode("div", {
-    "class": "ml-3 flex-grow"
+    "class": "ml-3 grow"
   }, [_createVNode("p", {
     "class": `text-sm font-medium text-${variant.value.color}-900`
   }, [slots.default?.() ?? props.text])]), !props.hideX && _createVNode("div", {
-    "class": "flex items-center flex-shrink-0 ml-3"
+    "class": "flex items-center shrink-0 ml-3"
   }, [_createVNode(NIconButton, {
     "color": variant.value.color,
     "size": 5,

package/{components → lib/components}/NBadge.js

@@ -57,7 +57,7 @@ const Component = createComponent('NBadge', nBadgeProps, (props, {
 }) => {
   return () => _createVNode(NTooltip, mapTooltipProps(props), {
     default: () => [_createVNode("div", {
-      "class": ['px-2 py-1 rounded-md font-semibold shadow', `${props.textSize} bg-${props.color}-${props.shade} text-${props.color}-${props.textShade}`, props.allCaps ? 'uppercase' : '', props.badgeClass]
+      "class": ['px-2 py-1 rounded-md font-semibold shadow-sm', `${props.textSize} bg-${props.color}-${props.shade} text-${props.color}-${props.textShade}`, props.allCaps ? 'uppercase' : '', props.badgeClass]
     }, [slots.default?.() || props.text])]
   });
 });

package/{components → lib/components}/NButton.js

@@ -54,12 +54,10 @@ const Component = createComponent('NButton', nButtonProps, (props, {
     default: () => [_createVNode("button", {
       "disabled": isDisabled.value,
       "type": props.type,
-      "class": [`block w-full font-medium rounded-md focus:outline-none focus-visible:ring-2 shadow text-${props.color}-900 relative`, isDisabled.value ? `bg-${props.color}-100 text-opacity-20 cursor-default` : `bg-${props.color}-200 hover:bg-${props.color}-300 focus-visible:ring-${props.color}-500`, props.small ? 'py-1 px-2 text-xs' : 'py-2 px-4 text-sm', props.buttonClass],
+      "class": [`block w-full font-medium rounded-md focus:outline-hidden focus-visible:ring-2 shadow-sm text-${props.color}-900 relative`, isDisabled.value ? `bg-${props.color}-100 cursor-default` : `bg-${props.color}-200 hover:bg-${props.color}-300 focus-visible:ring-${props.color}-500 cursor-pointer`, props.small ? 'py-1 px-2 text-xs' : 'py-2 px-4 text-sm', props.buttonClass],
       "onClick": props.onClick
     }, [_createVNode("span", {
-      "class": {
-        'opacity-10': props.loading
-      }
+      "class": props.loading ? 'opacity-0' : isDisabled.value ? 'opacity-20' : undefined
     }, [slots.default?.()]), props.loading && _createVNode("div", {
       "class": "absolute inset-0 flex items-center justify-center opacity-50"
     }, [_createVNode(NLoadingIndicator, {

package/{components → lib/components}/NCheckbox.js

@@ -37,7 +37,7 @@ const Component = createComponent('NCheckbox', nCheckboxProps, props => {
     "disabled": props.disabled,
     "onClick": toggle,
     "key": updateKey.value,
-    "class": [`h-5 w-5 border-default-300 rounded focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-${props.color}-500`, props.disabled ? `cursor-default bg-default-100 text-${props.color}-200` : `cursor-pointer text-${props.color}-400`]
+    "class": [`h-5 w-5 border-default-300 rounded-sm focus:outline-hidden focus:ring-0 focus-visible:ring-2 focus-visible:ring-${props.color}-500`, props.disabled ? `cursor-default opacity-50 bg-default-100 checked:bg-current text-${props.color}-400` : `cursor-pointer text-${props.color}-400`]
   }, null);
 });
 export { Component as NCheckbox, Component as default };

package/{components → lib/components}/NDialog.js

@@ -109,13 +109,13 @@ const Component = createComponent('NDialog', nDialogProps, (props, context) => {
     default: () => [_createVNode("div", {
       "class": "flex space-x-4 py-2"
     }, [_createVNode("div", {
-      "class": "flex-grow-0"
+      "class": "grow-0"
     }, [_createVNode(NIconCircle, {
       "icon": props.icon || defaults.value.icon,
       "iconSize": 6,
       "color": props.iconColor || defaults.value.iconColor
     }, null)]), _createVNode("div", {
-      "class": "flex-grow"
+      "class": "grow"
     }, [_createVNode(DialogTitle, {
       "as": "h4",
       "class": "font-medium text-lg text-default-700 mb-1"

package/{components → lib/components}/NDropdown.js

@@ -64,22 +64,22 @@ const Component = createComponentWithSlots('NDropdown', nDropdownProps, ['button
       "class": "flex"
     }, [props.button?.(MenuButton) || _createVNode(MenuButton, {
       "disabled": props.disabled,
-      "class": ['shadow w-full flex justify-between items-center text-default-700 rounded-md border bg-white border-default-300 px-4 py-2 text-sm font-medium focus:outline-none focus:ring-offset-2 focus-visible:ring-2 focus-visible:ring-primary-500', props.disabled ? 'text-opacity-20 cursor-default' : 'hover:bg-default-100', props.buttonClass]
+      "class": ['shadow-sm w-full flex justify-between items-center rounded-md border bg-white border-default-300 px-4 py-2 text-sm font-medium focus:outline-hidden focus:ring-offset-2 focus-visible:ring-2 focus-visible:ring-primary-500', props.disabled ? 'text-default-700/20 cursor-default' : 'hover:bg-default-100 text-default-700 cursor-pointer', props.buttonClass]
     }, {
       default: () => [_createVNode("span", null, [props.title]), _createVNode(ChevronDownIcon, {
-        "class": "-mr-1 ml-2 h-5 w-5 flex-shrink-0",
+        "class": "-mr-1 ml-2 h-5 w-5 shrink-0",
         "aria-hidden": "true"
       }, null)]
     })]), _createVNode(Transition, {
       "enterActiveClass": "transition ease-out duration-100",
-      "enterFromClass": "transform opacity-0 scale-95",
-      "enterToClass": "transform opacity-100 scale-100",
+      "enterFromClass": "opacity-0 scale-95",
+      "enterToClass": "opacity-100 scale-100",
       "leaveActiveClass": "transition ease-in duration-75",
-      "leaveFromClass": "transform opacity-100 scale-100",
-      "leaveToClass": "transform opacity-0 scale-95"
+      "leaveFromClass": "opacity-100 scale-100",
+      "leaveToClass": "opacity-0 scale-95"
     }, {
       default: () => [_createVNode(MenuItems, {
-        "class": ['z-10 absolute w-56 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none', props.right ? 'origin-top-right right-0' : 'origin-top-left left-0']
+        "class": ['z-10 absolute w-56 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black/5 focus:outline-hidden', props.right ? 'origin-top-right right-0' : 'origin-top-left left-0']
       }, {
         default: () => [slots.default?.() || _createVNode("div", {
           "class": "divide-y divide-default-200"
@@ -104,7 +104,7 @@ const Component = createComponentWithSlots('NDropdown', nDropdownProps, ['button
             }) : _createVNode("button", {
               "type": "button",
               "onClick": item.onClick,
-              "class": ['w-full text-left px-4 py-2 text-sm', active ? 'bg-default-100 text-default-900' : 'text-default-700']
+              "class": ['w-full text-left px-4 py-2 text-sm cursor-pointer', active ? 'bg-default-100 text-default-900' : 'text-default-700']
             }, [itemWithIcon(item)]);
           }
         }))]))])]

package/{components → lib/components}/NDropzone.js

@@ -148,7 +148,7 @@ const Component = createComponent('NDropzone', nDropzoneProps, props => {
   return () => {
     let _slot;
     return _createVNode("div", null, [_createVNode("button", {
-      "class": ['block w-full rounded-md border-dashed border-2  focus-visible:border-primary-500 focus:outline-none ', 'flex flex-col items-center justify-center text-center text-sm select-none p-4', !props.disabled ? 'hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700' : '', props.disabled ? 'border-default-300 bg-default-50/50 text-default-500/30' : isDragOver.value ? 'border-primary-300 bg-primary-50 text-primary-700' : 'border-default-300 bg-default-50 text-default-500', props.height],
+      "class": ['block w-full rounded-md border-dashed border-2  focus-visible:border-primary-500 focus:outline-hidden ', 'flex flex-col items-center justify-center text-center text-sm select-none p-4', !props.disabled ? 'hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700' : '', props.disabled ? 'border-default-300 bg-default-50/50 text-default-500/30' : isDragOver.value ? 'border-primary-300 bg-primary-50 text-primary-700' : 'border-default-300 bg-default-50 text-default-500', props.height],
       "onDrop": onDrop,
       "onDragover": onDragOver,
       "onDragleave": onDragLeave,
@@ -164,13 +164,13 @@ const Component = createComponent('NDropzone', nDropzoneProps, props => {
       "onChange": onInputFilesChanged,
       "onClick": event => event.stopPropagation()
     }, null), _createVNode("div", {
-      "class": "flex-grow mb-2"
+      "class": "grow mb-2"
     }, null), _createVNode("span", {
       "class": "font-medium"
     }, [trslc('vue-collection.text.drag-n-drop-files', props.maxFiles, {
       n: props.maxFiles
     })]), _createVNode("span", null, [props.description]), _createVNode("div", {
-      "class": "flex-grow mt-2 flex items-end justify-center text-red-500 font-medium"
+      "class": "grow mt-2 flex items-end justify-center text-red-500 font-medium"
     }, [_createVNode("span", null, [fileError.value])])]), _createVNode("div", {
       "class": "mt-2 space-y-1"
     }, [_createVNode("div", {
@@ -190,7 +190,7 @@ const Component = createComponent('NDropzone', nDropzoneProps, props => {
         "onClick": () => removeFile(file.index)
       }, null)])]
     })), _createVNode("div", {
-      "class": "flex-grow text-sm text-default-500 flex items-end justify-end text-right"
+      "class": "grow text-sm text-default-500 flex items-end justify-end text-right"
     }, [_createVNode("span", null, [_createVNode("span", null, [trslc('vue-collection.text.files-selected', files.value.length, {
       n: files.value.length
     })]), files.value.length > 0 && _createVNode(_Fragment, null, [_createVNode("span", null, [_createTextVNode(" ")]), _createVNode(NLink, {

package/{components → lib/components}/NIconButton.js

@@ -64,7 +64,7 @@ export const nIconButtonProps = {
  * The `NIconButton` is a regular button which does not have any text but an icon instead.
  */
 const Component = createComponent('NIconButton', nIconButtonProps, props => {
-  const classes = () => ['block p-0.5 rounded-md focus:outline-none focus-visible:ring-2 -m-1', props.disabled ? `text-${props.color}-200 cursor-default` : `hover:bg-${props.color}-${props.shade} hover:bg-opacity-10 text-${props.color}-${props.shade} focus-visible:ring-${props.color}-${props.shade} cursor-pointer`, props.buttonClass];
+  const classes = () => ['block p-0.5 rounded-md focus:outline-hidden focus-visible:ring-2 -m-1', props.disabled ? `text-${props.color}-200 cursor-default` : `hover:bg-current/10 text-${props.color}-${props.shade} focus-visible:ring-${props.color}-${props.shade} cursor-pointer`, props.buttonClass];
   const content = () => _createVNode(props.icon, {
     "class": `w-${props.size} h-${props.size}`
   }, null);

package/{components → lib/components}/NInput.js

@@ -98,7 +98,7 @@ const Component = createComponent('NInput', nInputProps, (props, context) => {
       "onFocus": () => props.onFocus?.(),
       "onBlur": () => props.onBlur?.(),
       "onInvalid": event => event.preventDefault(),
-      "class": ['block w-full rounded-md border focus:outline-none focus:ring-1 ', props.small ? 'text-xs py-0.5 px-2' : 'py-2 px-4', props.disabled ? 'text-default-500 placeholder-default-300 bg-default-50' : 'text-default-900 placeholder-default-400 ', props.error ? 'border-red-500 focus:border-red-500 focus:ring-red-500 pr-10' : 'border-default-300 focus:border-primary-500 focus:ring-primary-500', props.inputClass]
+      "class": ['block w-full rounded-md border focus:outline-hidden focus:ring-1 ', props.small ? 'text-xs py-0.5 px-2' : 'py-2 px-4', props.disabled ? 'text-default-500 placeholder-default-300 bg-default-50' : 'text-default-900 placeholder-default-400 ', props.error ? 'border-red-500 focus:border-red-500 focus:ring-red-500 pr-10' : 'border-default-300 focus:border-primary-500 focus:ring-primary-500', props.inputClass]
     }, null), _withDirectives(_createVNode("div", {
       "class": "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"
     }, [_createVNode(ExclamationCircleIcon, {

package/{components → lib/components}/NLink.js

@@ -51,7 +51,7 @@ const Component = createComponent('NLink', nLinkProps, (props, {
     const shade = props.shade;
     if (shade <= 500) return shade + 100;else return shade - 200;
   });
-  const classes = computed(() => ['font-medium focus:outline-none focus-visible:ring-2 rounded-sm ring-offset-2 hover:underline text-left', `${props.textSize} text-${props.color}-${props.shade} hover:text-${props.color}-${hoverShade.value} focus-visible:ring-${props.color}-${props.shade}`]);
+  const classes = computed(() => ['font-medium focus:outline-hidden focus-visible:ring-2 rounded-xs ring-offset-2 hover:underline text-left cursor-pointer', `${props.textSize} text-${props.color}-${props.shade} hover:text-${props.color}-${hoverShade.value} focus-visible:ring-${props.color}-${props.shade}`]);
   const disabledClasses = computed(() => ['font-medium text-left cursor-not-allowed', `${props.textSize} text-${props.color}-200`]);
   return () => props.route ? _createVNode(RouterLink, {
     "to": props.route,

package/{components → lib/components}/NModal.js

@@ -1,6 +1,6 @@
 import { createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
 import { createComponentWithSlots } from '../utils/component';
-import { Dialog, DialogOverlay, DialogTitle, TransitionRoot, TransitionChild } from '@headlessui/vue';
+import { Dialog, DialogTitle, TransitionRoot, TransitionChild } from '@headlessui/vue';
 import NButton from './NButton';
 import NIconButton from './NIconButton';
 import { XMarkIcon } from '@heroicons/vue/24/solid';
@@ -163,10 +163,13 @@ const Component = createComponentWithSlots('NModal', nModalProps, ['modal', 'hea
         "leave-from": "opacity-100",
         "leave-to": "opacity-0"
       }, {
-        default: () => [props.closeOnBackground ? _createVNode(DialogOverlay, {
-          "class": "fixed inset-0 bg-default-700 bg-opacity-75"
+        default: () => [props.closeOnBackground ? _createVNode("div", {
+          "class": "fixed inset-0 bg-default-700/75",
+          "aria-hidden": "true",
+          "onClick": cancel
         }, null) : _createVNode("div", {
-          "class": "fixed inset-0 bg-default-700 bg-opacity-75"
+          "class": "fixed inset-0 bg-default-700/75",
+          "aria-hidden": "true"
         }, null)]
       }), _createVNode("span", {
         "class": "hidden align-middle h-screen",
@@ -181,7 +184,7 @@ const Component = createComponentWithSlots('NModal', nModalProps, ['modal', 'hea
         "leave-to": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
       }, {
         default: () => [_createVNode("div", {
-          "class": ['transform m-4 w-full align-middle', props.maxWidth]
+          "class": ['relative m-4 w-full align-middle', props.maxWidth]
         }, [props.modal?.({
           ok,
           cancel

package/{components → lib/components}/NPagination.css

@@ -1,3 +1,5 @@
+@reference "tailwindcss";
+
 .pagination-item {
     @apply h-9 w-9 text-sm inline-flex items-center justify-center border font-medium border-default-300 text-default-500;
 }
@@ -7,9 +9,9 @@
 }
 
 .pagination-item.selectable {
-    @apply hover:bg-default-50 focus:outline-none focus-visible:border-primary-500 focus-visible:ring-primary-500 focus-visible:ring-1 focus-visible:z-[2];
+    @apply cursor-pointer hover:bg-default-50 focus:outline-hidden focus-visible:border-primary-500 focus-visible:ring-primary-500 focus-visible:ring-1 focus-visible:z-2;
 }
 
 .pagination-item.selectable.selected {
-    @apply border-primary-500 bg-primary-100 hover:bg-primary-100 text-primary-600 z-[1];
+    @apply border-primary-500 bg-primary-100 hover:bg-primary-100 text-primary-600 z-1;
 }

package/{components → lib/components}/NPagination.js

@@ -73,7 +73,7 @@ const Component = createComponent('NPagination', nPaginationProps, props => {
   }));
   const classesForItem = item => ['pagination-item', item.selectable ? 'selectable ' : '', item.selected ? 'selected' : '', props.small ? '' : 'not-small'];
   return () => _createVNode("nav", {
-    "class": "inline-flex rounded-md shadow -space-x-px"
+    "class": "inline-flex rounded-md shadow-sm -space-x-px"
   }, [_createVNode("button", {
     "class": ['pagination-item selectable rounded-l-md', props.small ? '' : 'not-small'],
     "onClick": previous

package/{components → lib/components}/NSearchbar.js

@@ -56,7 +56,7 @@ const Component = createComponent('NSearchbar', nSearchbarProps, (props, context
     "name": "search",
     "placeholder": props.placeholder,
     "autocomplete": "off",
-    "class": ['block w-full pl-10 pr-4 rounded-md border focus:outline-none focus:ring-1 transition placeholder-default-400 border-default-300 focus:border-primary-500 focus:ring-primary-500', props.small ? 'py-1' : 'py-2', props.inputClass],
+    "class": ['block w-full pl-10 pr-4 rounded-md border focus:outline-hidden focus:ring-1 transition placeholder-default-400 border-default-300 focus:border-primary-500 focus:ring-primary-500', props.small ? 'py-1' : 'py-2', props.inputClass],
     "onFocus": props.onFocus,
     "onBlur": props.onBlur
   }, null)]);

package/{components → lib/components}/NSelect.js

@@ -85,7 +85,7 @@ const Component = createComponent('NSelect', nSelectProps, (props, context) => {
         "value": props.value,
         "onChange": event => slotProps.onUpdateValue(event.target.value),
         "onBlur": slotProps.onBlur,
-        "class": ['block w-full py-2 pl-4 pr-10 rounded-md border focus:outline-none focus:ring-1', props.disabled ? 'text-default-300 ' : 'text-default-900 ', slotProps.error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'border-default-300 focus:border-primary-500 focus:ring-primary-500', props.inputClass]
+        "class": ['block w-full py-2 pl-4 pr-10 rounded-md border focus:outline-hidden focus:ring-1', props.disabled ? 'text-default-300 ' : 'text-default-900 ', slotProps.error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'border-default-300 focus:border-primary-500 focus:ring-primary-500', props.inputClass]
       }, [_createVNode("option", {
         "disabled": !props.optional,
         "selected": !props.value,

package/{components → lib/components}/NSuggestionList.js

@@ -140,7 +140,7 @@ const Component = createComponentWithSlots('NSuggestionList', nSuggestionListPro
     "class": "bg-white rounded-md shadow-lg p-2 absolute top-2 left-0 min-w-full z-10"
   }, [_createVNode("ul", null, [displayItems.value.map((item, index) => _createVNode("li", {
     "key": item.id,
-    "class": ['focus:outline-none hover:bg-default-50 rounded-md select-none p-2 cursor-pointer', selectedIndex.value === index ? 'bg-default-50' : ''],
+    "class": ['focus:outline-hidden hover:bg-default-50 rounded-md select-none p-2 cursor-pointer', selectedIndex.value === index ? 'bg-default-50' : ''],
     "onMousedown": onListMouseDown,
     "onMouseleave": onListMouseLeave,
     "onClick": () => onSelect(item.id)

package/{src/lib → lib}/components/NTable.css

@@ -1,3 +1,5 @@
+@reference "tailwindcss";
+
 .table-heading {
     @apply text-left text-xs font-medium text-default-500 uppercase tracking-wider;
 }

package/{components → lib/components}/NTableAction.js

@@ -32,7 +32,7 @@ const Component = createComponent('NTableAction', nTableActionProps, (props, {
   slots
 }) => {
   const content = () => slots.default?.() || _createVNode(_Fragment, null, [props.text]);
-  const classes = ['text-left font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-default-900 rounded-sm ring-offset-2 text-default-900 hover:underline hover:text-default-700'];
+  const classes = ['text-left font-medium focus:outline-hidden focus-visible:ring-2 focus-visible:ring-default-900 rounded-xs ring-offset-2 text-default-900 hover:underline hover:text-default-700 cursor-pointer'];
   return () => {
     let _slot;
     return props.route ? _createVNode(RouterLink, {

package/{components → lib/components}/NTextArea.js

@@ -122,7 +122,7 @@ const NTextAreaBase = createComponent('NTextAreaBase', nTextAreaBaseProps, (prop
       "onFocus": () => props.onFocus?.(),
       "onBlur": () => props.onBlur?.(),
       "onInvalid": event => event.preventDefault(),
-      "class": ['block w-full rounded-md border focus:outline-none focus:ring-1 ', props.disabled ? 'text-default-500 placeholder-default-300 bg-default-50' : 'text-default-900 placeholder-default-400 ', props.error ? 'border-red-500 focus:border-red-500 focus:ring-red-500 pr-10' : 'border-default-300 focus:border-primary-500 focus:ring-primary-500', props.resizable ? 'resize-y' : 'resize-none', props.inputClass]
+      "class": ['block w-full rounded-md border focus:outline-hidden focus:ring-1 ', props.disabled ? 'text-default-500 placeholder-default-300 bg-default-50' : 'text-default-900 placeholder-default-400 ', props.error ? 'border-red-500 focus:border-red-500 focus:ring-red-500 pr-10' : 'border-default-300 focus:border-primary-500 focus:ring-primary-500', props.resizable ? 'resize-y' : 'resize-none', props.inputClass]
     }, null), _withDirectives(_createVNode("div", {
       "class": "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"
     }, [_createVNode(ExclamationCircleIcon, {

package/{components → lib/components}/NTooltip.css

@@ -1,3 +1,5 @@
+@reference "tailwindcss";
+
 .arrow,
 .arrow::before {
     position: absolute;

package/{components → lib/components}/NTooltip.js

@@ -212,7 +212,7 @@ const NTooltipBase = createComponent('NTooltipBase', nTooltipProps, (props, {
   });
   watchRef(showTooltip, () => popperInstance?.update());
   return () => _createVNode(_Fragment, null, [_createVNode("div", {
-    "class": "p-[10px] -m-[10px]",
+    "class": "p-[10px] m-[-10px]",
     "onMouseleave": () => setTimeout(() => isHoveringContent.value = false, 10)
   }, [_createVNode("div", {
     "id": contentId,

package/{components → lib/components}/NValInput.d.ts

@@ -92,10 +92,7 @@ export declare const nValInputProps: {
      */
     readonly disableBlurValidation: BooleanConstructor;
     readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => JSX.Element /**
-     * If set to `true` this input is always valid when its value is empty.
-     * If set to `false` the input receives the {@link required} rule. Default is `false`.
-     */>;
+    readonly tooltipContent: PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {

package/package.json

@@ -2,13 +2,17 @@
     "name": "@naptics/vue-collection",
     "author": "Timo Siegenthaler and Jonas Schoch",
     "description": "Vue Collection is a collection of styled and fully functional Vue components which can easily be integrated into our projects.",
-    "version": "0.3.2",
-    "main": "./index.js",
+    "version": "1.0.0-beta.2",
+    "main": "./lib/index.js",
+    "files": [
+        "lib/"
+    ],
     "repository": {
         "type": "git",
         "url": "https://github.com/naptics/vue-collection"
     },
     "scripts": {
+        "prepack": "npm run build-lib",
         "dev": "vite",
         "lint": "eslint . --fix --ignore-pattern=.gitignore",
         "type-check": "run-p type-check-lib type-check-demo",
@@ -22,43 +26,44 @@
         "preinstall": "node ./scripts/sync-node-types.js"
     },
     "dependencies": {
-        "@headlessui/vue": "^1.7.10",
-        "@popperjs/core": "^2.11.6",
-        "awesome-phonenumber": "^5.1.0"
+        "@headlessui/vue": "^1.7.23",
+        "@popperjs/core": "^2.11.8",
+        "awesome-phonenumber": "^7.8.0"
     },
     "peerDependencies": {
         "@heroicons/vue": "^2.0.16",
         "vue": "^3.5.0"
     },
     "devDependencies": {
-        "@babel/cli": "^7.21.0",
-        "@babel/core": "^7.21.3",
-        "@intlify/unplugin-vue-i18n": "^11.0.3",
-        "@rushstack/eslint-patch": "^1.15.0",
-        "@tailwindcss/forms": "^0.5.3",
-        "@types/jsdom": "^21.1.0",
+        "@babel/cli": "^7.28.6",
+        "@babel/core": "^7.29.0",
+        "@eslint/js": "^10.0.1",
+        "@intlify/unplugin-vue-i18n": "^11.2.3",
+        "@rushstack/eslint-patch": "^1.16.1",
+        "@tailwindcss/forms": "^0.5.11",
+        "@tailwindcss/vite": "^4.3.0",
+        "@types/jsdom": "^28.0.3",
         "@types/node": "^24",
-        "@vitejs/plugin-vue": "^6.0.3",
-        "@vitejs/plugin-vue-jsx": "^5.1.2",
-        "@vue/babel-plugin-jsx": "^1.1.1",
+        "@vitejs/plugin-vue": "^6.0.7",
+        "@vitejs/plugin-vue-jsx": "^5.1.5",
+        "@vue/babel-plugin-jsx": "^2.0.1",
         "@vue/eslint-config-prettier": "^10.2.0",
-        "@vue/eslint-config-typescript": "^14.6.0",
-        "@vue/test-utils": "^2.3.0",
-        "@vue/tsconfig": "^0.5.1",
-        "autoprefixer": "^10.4.13",
-        "eslint": "^9.17.0",
-        "eslint-plugin-vue": "^10.6.2",
-        "jsdom": "^29.0.2",
+        "@vue/eslint-config-typescript": "^14.7.0",
+        "@vue/test-utils": "^2.4.10",
+        "@vue/tsconfig": "^0.8.1",
+        "eslint": "^10.4.0",
+        "eslint-plugin-vue": "^10.9.1",
+        "jsdom": "^29.1.1",
         "npm-run-all": "^4.1.5",
-        "postcss": "^8.4.21",
-        "prettier": "^3.0.0",
-        "tailwindcss": "^3.2.7",
-        "typescript": "~5.5.4",
-        "vite": "^7.3.0",
-        "vitest": "^4.0.15",
-        "vue": "^3.5.25",
-        "vue-i18n": "^9.2.2",
-        "vue-router": "^4.1.6",
-        "vue-tsc": "^3.1.8"
+        "postcss": "^8.5.15",
+        "prettier": "^3.8.3",
+        "tailwindcss": "^4.3.0",
+        "typescript": "~5.8.3",
+        "vite": "^8.0.14",
+        "vitest": "^4.1.7",
+        "vue": "^3.5.34",
+        "vue-i18n": "^11.4.4",
+        "vue-router": "^5.0.7",
+        "vue-tsc": "^3.3.1"
     }
 }

package/.github/workflows/build.yml

@@ -1,26 +0,0 @@
-name: Lint, Type-Check, Build & Test
-
-on: 
-  push: 
-    branches: 
-      - '**' 
-
-jobs:
-  build:
-    name: Lint, Type-Check, Build & Test
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-      - name: Read .nvmrc
-        run: echo "NVMRC=$(cat .nvmrc)" >> $GITHUB_OUTPUT
-        id: nvm
-      - name: Setup node environment
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ steps.nvm.outputs.NVMRC }}
-      - run: npm ci
-      - run: npm run lint
-      - run: npm run build-lib
-      - run: npm run build-demo
-      - run: npm run test

package/.github/workflows/deploy-demo.yml

@@ -1,46 +0,0 @@
-name: Deploy Demo App to Github Pages
-
-on:
-  push:
-    branches: 
-      - main
-    
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-env:
-  VITE_BASE_PATH: vue-collection/
-
-jobs:
-  build:
-    name: Lint, Type-Check, Build & Test
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-      - name: Setup Pages
-        uses: actions/configure-pages@v5
-      - name: Read .nvmrc
-        run: echo "NVMRC=$(cat .nvmrc)" >> $GITHUB_OUTPUT
-        id: nvm
-      - name: Setup node environment
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ steps.nvm.outputs.NVMRC }}
-      - run: npm ci
-      - run: npm run lint
-      - run: npm run build-demo
-      - run: npm run test
-      - name: Upload demo as artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: 'dist'
-  deploy:
-    name: Deploy Demo App To Github Pages
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - name: Deploy to GitHub Pages
-        uses: actions/deploy-pages@v4

package/.github/workflows/deploy-lib.yml

@@ -1,59 +0,0 @@
-name: Deploy Library to npm
-
-on:
-  push:
-    tags:
-      - v*
-
-jobs:
-  build:
-    name: Lint, Type-Check, Build & Test
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-      - name: Read .nvmrc
-        run: echo "NVMRC=$(cat .nvmrc)" >> $GITHUB_OUTPUT
-        id: nvm
-      - name: Setup node environment
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ steps.nvm.outputs.NVMRC }}
-      - run: npm ci
-      - run: npm run lint
-      - run: npm run build-lib
-      - run: npm run test
-      - name: Upload library as artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: vue-collection-lib
-          path: |
-            lib
-            .npmrc
-            package.json
-            README.md
-  deploy:
-    name: Deploy Library to npm
-    needs: build
-    runs-on: ubuntu-latest
-    permissions:
-      id-token: write  # Required for OIDC
-      contents: read
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-      - name: Read .nvmrc
-        run: echo "NVMRC=$(cat .nvmrc)" >> $GITHUB_OUTPUT
-        id: nvm
-      - name: Setup node environment
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ steps.nvm.outputs.NVMRC }}
-          registry-url: https://registry.npmjs.org/
-      - name: Download library artifact
-        uses: actions/download-artifact@v4
-        with:
-          name: vue-collection-lib
-      - name: Prepare folder structure
-        run: mv ./lib/* .
-      - run: npm publish --access=public

package/.gitlab-ci.yml

@@ -1,57 +0,0 @@
-cache:
-    paths:
-        - node_modules/
-
-default: 
-    image: node:18-alpine3.15
-
-stages: 
-    - prebuild
-    - build
-    - deploy
-
-workflow: 
-    rules: 
-        - if: $CI_PIPELINE_SOURCE == "merge_request_event"
-        - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
-
-prebuild: 
-    stage: prebuild
-    before_script:
-        - npm ci
-    script: 
-        - npm run type-check
-        - npm run lint
-        - npm run test
-
-
-build-pages: 
-    stage: build
-    before_script: 
-        - npm ci
-    script: 
-        - export VITE_BASE_PATH="${CI_PROJECT_PATH#$CI_PROJECT_ROOT_NAMESPACE}/"
-        - npm run build
-    artifacts:
-        paths:
-            - dist/
-        expire_in: 1 day
-
-pages:
-    stage: deploy
-    image: busybox:latest
-    environment:
-        name: Showroom
-        url: $CI_PAGES_URL
-    script: 
-        - rm -rf public
-        - mkdir public
-        - mv dist/* public
-    artifacts: 
-        paths: 
-            - public
-    rules: 
-        - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
-
-
-    

package/.nvmrc

@@ -1 +0,0 @@
-24