sprintify-ui 0.0.3 → 0.0.5

package/dist/style.css

@@ -1,4 +1,4 @@
-@charset "UTF-8";/*!
+@charset "UTF-8";.spinner[data-v-7d66ba2e]{animation:rotate-7d66ba2e 1s linear infinite;-webkit-animation:rotate-7d66ba2e 1s linear infinite;-moz-animation:rotate-7d66ba2e 1s linear infinite}@keyframes rotate-7d66ba2e{to{transform:rotate(360deg)}}.path[data-v-7d66ba2e]{stroke-dasharray:170;stroke-dashoffset:20}.th[data-v-c943591d]{background-color:rgb(248 250 252 / var(--tw-bg-opacity));position:sticky;top:0px;z-index:10;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));--tw-bg-opacity: .75;--tw-backdrop-blur: blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}/*!
  * Pikaday
  * Copyright © 2014 David Bushell | BSD & MIT license | https://dbushell.com/
  */.pika-single{z-index:9999;display:block;position:relative;color:#333;background:#fff;border:1px solid #ccc;border-bottom-color:#bbb;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.pika-single:before,.pika-single:after{content:" ";display:table}.pika-single:after{clear:both}.pika-single.is-hidden{display:none}.pika-single.is-bound{position:absolute;box-shadow:0 5px 15px -5px #00000080}.pika-lendar{float:left;width:240px;margin:8px}.pika-title{position:relative;text-align:center}.pika-label{display:inline-block;position:relative;z-index:9999;overflow:hidden;margin:0;padding:5px 3px;font-size:14px;line-height:20px;font-weight:700;background-color:#fff}.pika-title select{cursor:pointer;position:absolute;z-index:9998;margin:0;left:0;top:5px;opacity:0}.pika-prev,.pika-next{display:block;cursor:pointer;position:relative;outline:none;border:0;padding:0;width:20px;height:30px;text-indent:20px;white-space:nowrap;overflow:hidden;background-color:transparent;background-position:center center;background-repeat:no-repeat;background-size:75% 75%;opacity:.5}.pika-prev:hover,.pika-next:hover{opacity:1}.pika-prev,.is-rtl .pika-next{float:left;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==)}.pika-next,.is-rtl .pika-prev{float:right;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=)}.pika-select{display:inline-block}.pika-table{width:100%;border-collapse:collapse;border-spacing:0;border:0}.pika-table th,.pika-table td{width:14.285714285714286%;padding:0}.pika-table th{color:#999;font-size:12px;line-height:25px;font-weight:700;text-align:center}.pika-button{cursor:pointer;display:block;box-sizing:border-box;-moz-box-sizing:border-box;outline:none;border:0;margin:0;width:100%;padding:5px;color:#666;font-size:12px;line-height:15px;text-align:right;background:#f5f5f5;height:initial}.pika-week{font-size:11px;color:#999}.is-today .pika-button{color:#3af;font-weight:700}.is-selected .pika-button,.has-event .pika-button{color:#fff;font-weight:700;background:#33aaff;box-shadow:inset 0 1px 3px #178fe5;border-radius:3px}.has-event .pika-button{background:#005da9;box-shadow:inset 0 1px 3px #0076c9}.is-disabled .pika-button,.is-inrange .pika-button{background:#D5E9F7}.is-startrange .pika-button{color:#fff;background:#6CB31D;box-shadow:none;border-radius:3px}.is-endrange .pika-button{color:#fff;background:#33aaff;box-shadow:none;border-radius:3px}.is-disabled .pika-button{pointer-events:none;cursor:default;color:#999;opacity:.3}.is-outside-current-month .pika-button{color:#999;opacity:.3}.is-selection-disabled{pointer-events:none;cursor:default}.pika-button:hover,.pika-row.pick-whole-week:hover .pika-button{color:#fff;background:#ff8000;box-shadow:none;border-radius:3px}.pika-table abbr{border-bottom:none;cursor:help}.pikaday-white{--backgroundColor: #ffffff;--textColor: #718096;--currentDateTextColor: #3182ce;--selectedDateBackgroundColor: #3182ce;--selectedDateTextColor: #ffffff;--labelTextColor: #4a5568;--weekDaysTextColor: #a0aec0;font-family:inherit;background-color:var(--backgroundColor);padding:.5rem;z-index:2000;margin:6px 0 0;--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);border-radius:.5rem}.pikaday-white .pika-title{width:100%;text-align:center;display:flex;justify-content:flex-start;margin-bottom:5px}.pikaday-white .pika-prev,.pikaday-white .pika-next{position:absolute;outline:none;padding:0;width:26px;height:26px;top:-1px;display:inline-block;margin-top:0;cursor:pointer;text-indent:-9999px;white-space:nowrap;overflow:hidden;background-color:transparent;background-position:center center;background-repeat:no-repeat;opacity:.7}.pikaday-white .pika-prev:hover,.pikaday-white .pika-next:hover{opacity:1}.pikaday-white .pika-prev{right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7'%3E%3C/path%3E%3C/svg%3E")}.pikaday-white .pika-next{right:2px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'%3E%3C/path%3E%3C/svg%3E")}.pika-prev.is-disabled,.pika-next.is-disabled{cursor:default;opacity:.2}.pikaday-white .pika-label{margin-right:.375rem;border-radius:.25rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));padding:.25rem .5rem;font-size:14px;font-weight:500;line-height:1}.pikaday-white .pika-label{position:relative}.pikaday-white .pika-select-month,.pikaday-white .pika-select-year{width:100%;cursor:pointer;position:absolute;z-index:9998;margin:0;left:0;top:0;opacity:0;padding:0}.pikaday-white table{width:100%;border-collapse:collapse}.pikaday-white table th{width:2em;height:2em;font-weight:400;color:var(--weekDaysTextColor);text-align:center}.pikaday-white table th abbr{text-decoration:none}.pikaday-white table td{padding:1px}.pikaday-white table td button{width:2em;height:2em;text-align:center;border-radius:9999px;background-color:var(--backgroundColor)}.pikaday-white table td button:hover{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity))}.pikaday-white table td.is-today button{color:var(--currentDateTextColor)}.pikaday-white table td.is-selected button{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity));font-weight:400}.pikaday-white table td button{color:var(--textColor)}.btn{position:relative;display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:.375rem;border-width:1px;padding:.625rem 1rem;text-align:center;font-size:.875rem;line-height:1.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.btn:focus-visible{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-offset-width: 2px}.btn:disabled{cursor:not-allowed;opacity:.5}.btn{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity))}.btn:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.btn:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity))}.btn:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.btn.btn-xs{padding:.25rem .5rem;font-size:.75rem;line-height:1rem}.btn.btn-sm{padding:.5rem .75rem;font-size:.875rem;line-height:1rem}.btn.btn-md{padding:.625rem 1rem;font-size:.875rem;line-height:1.25rem}.btn.btn-lg{padding:.75rem 1.25rem;font-size:1rem;line-height:1.5rem}.btn.btn-xl{padding:1rem 1.5rem;font-size:1rem;line-height:1.5rem}.btn-default{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity))}.btn-default:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.btn-default:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity))}.btn-default:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.btn.btn-primary{border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn.btn-primary:hover{--tw-bg-opacity: 1;background-color:rgb(67 56 202 / var(--tw-bg-opacity))}.btn.btn-primary:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity))}.btn.btn-primary:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity))}.btn.btn-secondary{border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(199 210 254 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(67 56 202 / var(--tw-text-opacity))}.btn.btn-secondary:hover{--tw-bg-opacity: 1;background-color:rgb(224 231 255 / var(--tw-bg-opacity))}.btn.btn-secondary:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity))}.btn.btn-secondary:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(224 231 255 / var(--tw-bg-opacity))}.btn.btn-secondary-outline{--tw-border-opacity: 1;border-color:rgb(129 140 248 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(199 210 254 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(67 56 202 / var(--tw-text-opacity))}.btn.btn-secondary-outline:hover{--tw-bg-opacity: 1;background-color:rgb(224 231 255 / var(--tw-bg-opacity))}.btn.btn-secondary-outline:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity))}.btn.btn-secondary-outline:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(224 231 255 / var(--tw-bg-opacity))}.btn.btn-slate-100{border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity))}.btn.btn-slate-100:hover{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity))}.btn.btn-slate-100:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(203 213 225 / var(--tw-ring-opacity))}.btn.btn-slate-100:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.btn.btn-slate-100-outline{--tw-border-opacity: 1;border-color:rgb(226 232 240 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity))}.btn.btn-slate-100-outline:hover{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.btn.btn-slate-100-outline:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(203 213 225 / var(--tw-ring-opacity))}.btn.btn-slate-100-outline:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.btn.btn-slate-200{border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity))}.btn.btn-slate-200:hover{--tw-bg-opacity: 1;background-color:rgb(203 213 225 / var(--tw-bg-opacity))}.btn.btn-slate-200:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(203 213 225 / var(--tw-ring-opacity))}.btn.btn-slate-200:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.btn.btn-slate-200-outline{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity))}.btn.btn-slate-200-outline:hover{--tw-bg-opacity: 1;background-color:rgb(203 213 225 / var(--tw-bg-opacity))}.btn.btn-slate-200-outline:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(203 213 225 / var(--tw-ring-opacity))}.btn.btn-slate-200-outline:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.btn.btn-white{border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity))}.btn.btn-white:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.btn.btn-white:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity))}.btn.btn-white:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.btn.btn-white-outline{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity))}.btn.btn-white-outline:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.btn.btn-white-outline:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity))}.btn.btn-white-outline:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.btn.btn-white-outline-primary{--tw-border-opacity: 1;border-color:rgb(129 140 248 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(79 70 229 / var(--tw-text-opacity))}.btn.btn-white-outline-primary:hover{--tw-bg-opacity: 1;background-color:rgb(224 231 255 / var(--tw-bg-opacity))}.btn.btn-white-outline-primary:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity))}.btn.btn-white-outline-primary:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.btn.btn-black{border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(15 23 42 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn.btn-black:hover{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity))}.btn.btn-black:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(15 23 42 / var(--tw-ring-opacity))}.btn.btn-black:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(15 23 42 / var(--tw-bg-opacity))}.btn.btn-danger{border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(220 38 38 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn.btn-danger:hover{--tw-bg-opacity: 1;background-color:rgb(185 28 28 / var(--tw-bg-opacity))}.btn.btn-danger:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity))}.btn.btn-danger:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(220 38 38 / var(--tw-bg-opacity))}.btn.btn-warning{border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(250 204 21 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(113 63 18 / var(--tw-text-opacity))}.btn.btn-warning:hover{--tw-bg-opacity: 1;background-color:rgb(254 240 138 / var(--tw-bg-opacity))}.btn.btn-warning:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(253 224 71 / var(--tw-ring-opacity))}.btn.btn-warning:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(253 224 71 / var(--tw-bg-opacity))}.form-input-label{display:block;font-size:.875rem;line-height:1.25rem;line-height:1.25;--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity))}.form-input-error{font-size:.875rem;line-height:1.25rem;line-height:1.25;--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity))}input::-moz-placeholder,textarea::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(148 163 184 / var(--tw-placeholder-opacity))}input::placeholder,textarea::placeholder{--tw-placeholder-opacity: 1;color:rgb(148 163 184 / var(--tw-placeholder-opacity))}

package/dist/types/src/components/BaseBelongsTo.vue.d.ts

@@ -10,10 +10,10 @@ declare const _default: {
             inputClass: string;
             placeholder: string;
             disabled: boolean;
-            createNewUrl: RouteLocationRaw;
             showRouteUrl: ((id: string | number) => string) | undefined;
             foreignKey: string;
             currentModel: Selection;
+            createNewUrl: RouteLocationRaw;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             modelValue: {
                 required: true;
@@ -44,11 +44,11 @@ declare const _default: {
                 type: BooleanConstructor;
             };
             placeholder: {
-                default: string;
+                default: undefined;
                 type: StringConstructor;
             };
             inputClass: {
-                default: string;
+                default: undefined;
                 type: StringConstructor;
             };
             currentModel: {
@@ -61,7 +61,7 @@ declare const _default: {
             };
         }>> & {
             "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "required" | "inputClass" | "placeholder" | "disabled" | "createNewUrl" | "showRouteUrl" | "foreignKey" | "currentModel">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "required" | "inputClass" | "placeholder" | "disabled" | "showRouteUrl" | "foreignKey" | "currentModel" | "createNewUrl">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -105,11 +105,11 @@ declare const _default: {
                 type: BooleanConstructor;
             };
             placeholder: {
-                default: string;
+                default: undefined;
                 type: StringConstructor;
             };
             inputClass: {
-                default: string;
+                default: undefined;
                 type: StringConstructor;
             };
             currentModel: {
@@ -127,10 +127,10 @@ declare const _default: {
             inputClass: string;
             placeholder: string;
             disabled: boolean;
-            createNewUrl: RouteLocationRaw;
             showRouteUrl: ((id: string | number) => string) | undefined;
             foreignKey: string;
             currentModel: Selection;
+            createNewUrl: RouteLocationRaw;
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -181,11 +181,11 @@ declare const _default: {
             type: BooleanConstructor;
         };
         placeholder: {
-            default: string;
+            default: undefined;
             type: StringConstructor;
         };
         inputClass: {
-            default: string;
+            default: undefined;
             type: StringConstructor;
         };
         currentModel: {
@@ -232,11 +232,11 @@ declare const _default: {
         type: BooleanConstructor;
     };
     placeholder: {
-        default: string;
+        default: undefined;
         type: StringConstructor;
     };
     inputClass: {
-        default: string;
+        default: undefined;
         type: StringConstructor;
     };
     currentModel: {
@@ -254,10 +254,10 @@ declare const _default: {
     inputClass: string;
     placeholder: string;
     disabled: boolean;
-    createNewUrl: RouteLocationRaw;
     showRouteUrl: ((id: string | number) => string) | undefined;
     foreignKey: string;
     currentModel: Selection;
+    createNewUrl: RouteLocationRaw;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         option: (_: any) => any;

package/dist/types/src/components/BaseInput.vue.d.ts

@@ -8,8 +8,8 @@ declare const _default: {
             type: string;
             placeholder: string;
             disabled: boolean;
-            autocomplete: boolean;
             name: string;
+            autocomplete: boolean;
             preventSubmit: boolean;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             modelValue: {
@@ -46,7 +46,7 @@ declare const _default: {
             };
         }>> & {
             "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "required" | "type" | "placeholder" | "disabled" | "autocomplete" | "name" | "preventSubmit">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "required" | "type" | "placeholder" | "disabled" | "name" | "autocomplete" | "preventSubmit">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -100,8 +100,8 @@ declare const _default: {
             type: string;
             placeholder: string;
             disabled: boolean;
-            autocomplete: boolean;
             name: string;
+            autocomplete: boolean;
             preventSubmit: boolean;
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
@@ -202,8 +202,8 @@ declare const _default: {
     type: string;
     placeholder: string;
     disabled: boolean;
-    autocomplete: boolean;
     name: string;
+    autocomplete: boolean;
     preventSubmit: boolean;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
 export default _default;

package/dist/types/src/components/BaseTableColumn.vue.d.ts

@@ -146,8 +146,8 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     label: string;
     meta: Record<string, any> | unknown[];
-    width: number;
     field: string;
+    width: number;
     position: "left" | "right" | "center";
     searchable: boolean;
     customKey: string | number;

package/dist/types/src/components/BaseTextarea.vue.d.ts

@@ -8,8 +8,8 @@ declare const _default: {
             type: string;
             placeholder: string;
             disabled: boolean;
-            autocomplete: boolean;
             name: string;
+            autocomplete: boolean;
             preventSubmit: boolean;
             rows: number;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
@@ -51,7 +51,7 @@ declare const _default: {
             };
         }>> & {
             "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "required" | "type" | "placeholder" | "disabled" | "autocomplete" | "name" | "preventSubmit" | "rows">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "required" | "type" | "placeholder" | "disabled" | "name" | "autocomplete" | "preventSubmit" | "rows">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -109,8 +109,8 @@ declare const _default: {
             type: string;
             placeholder: string;
             disabled: boolean;
-            autocomplete: boolean;
             name: string;
+            autocomplete: boolean;
             preventSubmit: boolean;
             rows: number;
         }, {}, string> & {
@@ -220,8 +220,8 @@ declare const _default: {
     type: string;
     placeholder: string;
     disabled: boolean;
-    autocomplete: boolean;
     name: string;
+    autocomplete: boolean;
     preventSubmit: boolean;
     rows: number;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;

package/dist/types/src/components/index.d.ts

@@ -1,5 +1,25 @@
 import BaseAlert from './BaseAlert.vue';
 import BaseAutocomplete from './BaseAutocomplete.vue';
+import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
+import BaseAvatar from './BaseAvatar.vue';
+import BaseBadge from './BaseBadge.vue';
+import BaseBelongsTo from './BaseBelongsTo.vue';
+import BaseBoolean from './BaseBoolean.vue';
+import BaseBreadcrumbs from './BaseBreadcrumbs.vue';
 import BaseButton from './BaseButton.vue';
-import { Icon } from '@iconify/vue';
-export { BaseAlert, BaseAutocomplete, BaseButton, Icon };
+import BaseCard from './BaseCard.vue';
+import BaseCardRow from './BaseCardRow.vue';
+import BaseClipboard from './BaseClipboard.vue';
+import BaseContainer from './BaseContainer.vue';
+import BaseCounter from './BaseCounter.vue';
+import BaseDataIterator from './BaseDataIterator.vue';
+import BaseDataTable from './BaseDataTable.vue';
+import BaseDatePicker from './BaseDatePicker.vue';
+import BaseDateSelect from './BaseDateSelect.vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+import BaseLoadingCover from './BaseLoadingCover.vue';
+import BaseMenu from './BaseMenu.vue';
+import BaseMenuItem from './BaseMenuItem.vue';
+import BaseTable from './BaseTable.vue';
+import BaseTableColumn from './BaseTableColumn.vue';
+export { BaseAlert, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseCard, BaseCardRow, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseIcon, BaseLoadingCover, BaseMenu, BaseMenuItem, BaseTable, BaseTableColumn, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "docs:dev": "vitepress dev docs",
@@ -10,7 +10,6 @@
     "build-storybook": "build-storybook"
   },
   "peerDependencies": {
-    "@headlessui/vue": "^1.7.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.2",
@@ -26,9 +25,11 @@
     "vue-i18n": "^9.0.0",
     "vue-router": "^4.0.0"
   },
+  "dependencies": {
+    "@headlessui/vue": "^1.7.4"
+  },
   "devDependencies": {
     "@babel/core": "^7.20.2",
-    "@headlessui/vue": "^1.7.4",
     "@iconify/vue": "^4.0.0",
     "@storybook/addon-actions": "^6.5.13",
     "@storybook/addon-essentials": "^6.5.13",

package/src/components/BaseAlert.vue

@@ -4,22 +4,22 @@
     :class="[backgroundClass, borderClass]"
   >
     <div v-if="showIcon" class="mr-3">
-      <Icon
+      <BaseIcon
         v-if="color == 'warning'"
         icon="heroicons-solid:exclamation"
         :class="iconClass"
       />
-      <Icon
+      <BaseIcon
         v-else-if="color == 'danger'"
         icon="heroicons-solid:exclamation-circle"
         :class="iconClass"
       />
-      <Icon
+      <BaseIcon
         v-else-if="color == 'success'"
         icon="heroicons-solid:check-circle"
         :class="iconClass"
       />
-      <Icon
+      <BaseIcon
         v-else-if="color == 'info'"
         icon="heroicons-solid:information-circle"
         :class="iconClass"

package/src/components/BaseAutocomplete.vue

@@ -21,7 +21,7 @@
         <div
           class="pointer-events-none absolute top-0 left-0 flex h-full items-center justify-center pl-2.5"
         >
-          <Icon
+          <BaseIcon
             class="h-5 w-5 text-slate-400"
             icon="heroicons:magnifying-glass-solid"
           />
@@ -37,7 +37,7 @@
           class="group flex h-full items-center rounded p-1.5 enabled:hover:bg-slate-100"
           @click="clear()"
         >
-          <Icon
+          <BaseIcon
             icon="heroicons:x-mark"
             class="h-5 w-5 text-slate-500 group-hover:text-slate-700"
           />

package/src/components/BaseAutocompleteFetch.vue

@@ -29,7 +29,10 @@
             class="btn flex items-center justify-center font-normal shadow"
             @mousedown="footerProps.dontLooseFocus"
           >
-            <Icon icon="heroicons-solid:plus" class="mr-1.5 block h-5 w-5" />
+            <BaseIcon
+              icon="heroicons-solid:plus"
+              class="mr-1.5 block h-5 w-5"
+            />
             <span>{{ $t('sui.create_new') }}</span>
           </router-link>
         </div>

package/src/components/BaseAvatar.stories.js

@@ -33,7 +33,7 @@ Demo.args = {
     first_name: 'Jane',
     last_name: 'Doe',
     full_name: 'Jane Doe',
-    avatar_thumbnail_url:
+    avatar_url:
       'https://images.unsplash.com/photo-1494790108377-be9c29b29330??auto=format&fit=crop&w=200&h=200&q=80&g=face',
   },
 };

package/src/components/BaseBelongsTo.vue

@@ -62,11 +62,11 @@ const props = defineProps({
     type: Boolean,
   },
   placeholder: {
-    default: '',
+    default: undefined,
     type: String,
   },
   inputClass: {
-    default: '',
+    default: undefined,
     type: String,
   },
   currentModel: {

package/src/components/BaseBoolean.vue

@@ -4,10 +4,10 @@
     :class="classes"
   >
     <div v-if="modelValue">
-      <Icon icon="heroicons-solid:check" />
+      <BaseIcon icon="heroicons-solid:check" />
     </div>
     <div v-else>
-      <Icon icon="heroicons-solid:x" />
+      <BaseIcon icon="heroicons-solid:x" />
     </div>
   </div>
 </template>

package/src/components/BaseBreadcrumbs.vue

@@ -8,13 +8,13 @@
       <ol role="list" class="flex items-center space-x-3">
         <li v-for="(breadcrumb, index) in breadcrumbs" :key="index">
           <div class="flex items-center">
-            <Icon
+            <BaseIcon
               v-if="index > 0"
               icon="heroicons-solid:chevron-right"
               class="h-5 w-5 flex-shrink-0 text-slate-400"
               aria-hidden="true"
             />
-            <router-link
+            <RouterLink
               v-slot="{ href, navigate, isExactActive }"
               :to="breadcrumb.to"
               custom
@@ -31,30 +31,30 @@
                 @click.prevent="navigate()"
               >
                 <span v-if="breadcrumb.icon">
-                  <Icon :icon="breadcrumb.icon" />
+                  <BaseIcon :icon="breadcrumb.icon" />
                 </span>
                 <span v-else>
                   {{ breadcrumb.label }}
                 </span>
               </a>
-            </router-link>
+            </RouterLink>
           </div>
         </li>
       </ol>
     </nav>
 
-    <router-link
+    <RouterLink
       v-if="mobileBreadcrumb"
       :to="mobileBreadcrumb.to"
       class="block text-slate-500 sm:hidden"
     >
       <div class="flex items-center">
-        <Icon icon="heroicons-solid:arrow-left" class="mr-2" />
+        <BaseIcon icon="heroicons-solid:arrow-left" class="mr-2" />
         <span>
           {{ mobileBreadcrumb.label }}
         </span>
       </div>
-    </router-link>
+    </RouterLink>
   </div>
 </template>
 

package/src/components/BaseClipboard.stories.js

@@ -19,7 +19,7 @@ const Template = (args) => ({
     <br>
 
     <BaseClipboard class="mb-3 border border-slate-200 rounded px-2 py-px">
-      <Icon icon="heroicons:server" class="mr-2 text-slate-500" />
+      <BaseIcon icon="heroicons:server" class="mr-2 text-slate-500" />
       <span class="font-mono text-sm text-slate-600">{{ args.value }}</span>
     </BaseClipboard>
   `,

package/src/components/BaseClipboard.vue

@@ -23,10 +23,10 @@
           class="ml-2 whitespace-nowrap rounded bg-slate-900 bg-opacity-80 px-3 py-2 text-xs leading-tight text-white backdrop-blur"
         >
           <div v-if="showCopied" class="flex items-center">
-            <Icon
+            <BaseIcon
               class="mr-1 text-green-500"
               icon="heroicons:check-circle-solid"
-            ></Icon>
+            />
             {{ $t('sui.copied') }}
           </div>
           <div v-else>

package/src/components/BaseDataIterator.vue

@@ -15,7 +15,7 @@
               <div
                 class="pointer-events-none absolute top-0 left-0 flex h-full items-center justify-center pl-2.5"
               >
-                <Icon
+                <BaseIcon
                   class="h-6 w-6 text-slate-400"
                   icon="heroicons:magnifying-glass"
                 />
@@ -40,7 +40,7 @@
                     onSearch('');
                   "
                 >
-                  <Icon
+                  <BaseIcon
                     class="h-6 w-6 text-slate-500"
                     icon="heroicons:x-mark"
                   />
@@ -56,7 +56,7 @@
             type="button"
             @click="showFilters = true"
           >
-            <Icon
+            <BaseIcon
               class="mr-2 h-6 w-6 text-slate-500"
               icon="heroicons:adjustments-horizontal-solid"
             />
@@ -76,7 +76,7 @@
                   open ? 'ring-2 ring-primary-500 ring-offset-2' : false,
                 ]"
               >
-                <Icon icon="heroicons-solid:dots-vertical" />
+                <BaseIcon icon="heroicons-solid:dots-vertical" />
               </div>
             </template>
           </BaseMenu>
@@ -276,7 +276,7 @@ const props = defineProps({
    * Save data table state in URL.
    */
   historyMode: {
-    default: true,
+    default: false,
     type: Boolean,
   },
 });

package/src/components/BaseDataTable.stories.js

@@ -31,7 +31,7 @@ const template = `
       <p class="text-xs leading-tight text-slate-500">
         {{ row.subtitle }}
       </p>
-    <div>
+    </div>
   </BaseTableColumn>
 
   <BaseTableColumn

package/src/components/BaseDataTable.vue

@@ -59,7 +59,7 @@
                   :disabled="!canUpdate(row)"
                 >
                   <button class="btn btn-white p-2">
-                    <Icon
+                    <BaseIcon
                       icon="heroicons:cog-6-tooth-solid"
                       class="text-slate-500"
                     />
@@ -73,7 +73,10 @@
                   :disabled="!canDelete(row)"
                   @click="onDeleteClick(row)"
                 >
-                  <Icon icon="heroicons:trash-solid" class="text-slate-500" />
+                  <BaseIcon
+                    icon="heroicons:trash-solid"
+                    class="text-slate-500"
+                  />
                 </button>
               </div>
             </BaseTableColumn>
@@ -90,7 +93,7 @@
           <template #empty>
             <div v-if="error" class="flex items-center justify-center py-16">
               <div class="flex flex-col items-center justify-center">
-                <Icon
+                <BaseIcon
                   icon="heroicons:x-circle"
                   class="h-10 w-10 text-red-600"
                 />
@@ -324,7 +327,7 @@ const props = defineProps({
    * Save data table state in URL
    */
   historyMode: {
-    default: true,
+    default: false,
     type: Boolean,
   },
 

package/src/components/BaseDataTableToggleColumns.vue

@@ -25,7 +25,7 @@ import BaseTable from './BaseTable.vue';
 const props = defineProps({
   table: {
     required: true,
-    type: Object as PropType<InstanceType<typeof BaseTable> | null>,
+    type: [Object, null] as PropType<InstanceType<typeof BaseTable> | null>,
   },
   visibleColumns: {
     required: true,
@@ -52,8 +52,6 @@ const toggleableColumns = computed(() => {
 function onVisibleColumnChange(event: any, newKey: number) {
   const checked = event.target.checked as boolean;
 
-  console.log(checked);
-
   let newVisibleColumns = cloneDeep(props.visibleColumns);
 
   if (checked) {

package/src/components/BaseDatePicker.vue

@@ -3,7 +3,7 @@
     <div
       class="pointer-events-none absolute top-0 left-0 flex h-full items-center justify-center pl-2.5"
     >
-      <Icon
+      <BaseIcon
         class="relative -top-px h-5 w-5 text-slate-400"
         icon="heroicons:calendar"
       />
@@ -27,7 +27,7 @@
         class="flex h-8 items-center rounded p-1 hover:bg-slate-200"
         @click="clear()"
       >
-        <Icon class="h-5 w-5 text-slate-600" icon="heroicons:x-mark" />
+        <BaseIcon class="h-5 w-5 text-slate-600" icon="heroicons:x-mark" />
       </button>
     </div>
   </div>

package/src/components/BaseDialog.vue

@@ -12,22 +12,22 @@
           'bg-green-100': color == 'success',
         }"
       >
-        <Icon
+        <BaseIcon
           v-if="color == 'danger'"
           class="h-6 w-6 text-red-600"
           icon="heroicons:exclaimation-triangle"
         />
-        <Icon
+        <BaseIcon
           v-else-if="color == 'warning'"
           class="h-6 w-6 text-yellow-600"
           icon="heroicons:exclaimation-circle"
         />
-        <Icon
+        <BaseIcon
           v-else-if="color == 'success'"
           class="h-6 w-6 text-green-600"
           icon="heroicons:check-circle"
         />
-        <Icon
+        <BaseIcon
           v-else
           class="h-6 w-6 text-primary-600"
           icon="heroicons:information-circle"

package/src/components/BaseMediaLibrary.vue

@@ -51,7 +51,7 @@
             ]"
           >
             <div class="rounded-full bg-slate-200 p-2">
-              <Icon
+              <BaseIcon
                 icon="heroicons:arrow-up-on-square"
                 class="h-6 w-6 text-slate-500"
               />

package/src/components/BaseMenuItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="buttonClasses">
     <div class="flex items-center">
-      <Icon v-if="icon" :icon="icon" :class="iconClasses" />
+      <BaseIcon v-if="icon" :icon="icon" :class="iconClasses" />
       {{ label }}
     </div>
     <div v-if="count" class="relative -top-px ml-[5px]">