@indielayer/ui 0.1.1 → 0.2.0

package/lib/cjs/components/image/Image.vue_vue_type_script_lang.js

@@ -0,0 +1,28 @@
+'use strict';
+
+const fallback = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
+
+var script = {
+  props: {
+    src: {
+      type: String,
+      default: '',
+    },
+  },
+
+  data() {
+    return {
+      source: fallback,
+    }
+  },
+
+  mounted() {
+    const img = new Image();
+
+    img.onload = () => { this.source = this.src; };
+    img.onerror = () => { };
+    img.src = this.src;
+  },
+};
+
+module.exports = script;

package/lib/cjs/components/image/Image.vue_vue_type_template_id_d7718e2c_lang.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+const _hoisted_1 = ["src"];
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (vue.openBlock(), vue.createElementBlock("img", { src: $data.source }, null, 8, _hoisted_1))
+}
+
+exports.render = render;

package/lib/cjs/components/index.js

@@ -3,47 +3,50 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Spacer = require('./spacer/Spacer.vue.js');
-var Avatar_vue_vue_type_script_lang = require('./avatar/Avatar.vue_vue&type=script&lang.js');
-var Button_vue_vue_type_script_lang = require('./button/Button.vue_vue&type=script&lang.js');
-var Card_vue_vue_type_script_lang = require('./card/Card.vue_vue&type=script&lang.js');
-var Checkbox_vue_vue_type_script_lang = require('./checkbox/Checkbox.vue_vue&type=script&lang.js');
-var Collapse_vue_vue_type_script_lang = require('./collapse/Collapse.vue_vue&type=script&lang.js');
-var Container_vue_vue_type_script_lang = require('./container/Container.vue_vue&type=script&lang.js');
-var Divider_vue_vue_type_script_lang = require('./divider/Divider.vue_vue&type=script&lang.js');
-var Form_vue_vue_type_script_lang = require('./form/Form.vue_vue&type=script&lang.js');
-var Icon_vue_vue_type_script_lang = require('./icon/Icon.vue_vue&type=script&lang.js');
-var Input_vue_vue_type_script_lang = require('./input/Input.vue_vue&type=script&lang.js');
-var Link_vue_vue_type_script_lang = require('./link/Link.vue_vue&type=script&lang.js');
-var Modal_vue_vue_type_script_lang = require('./modal/Modal.vue_vue&type=script&lang.js');
-var Note_vue_vue_type_script_lang = require('./note/Note.vue_vue&type=script&lang.js');
-var Pagination_vue_vue_type_script_lang = require('./pagination/Pagination.vue_vue&type=script&lang.js');
-var PaginationItem_vue_vue_type_script_lang = require('./pagination/PaginationItem.vue_vue&type=script&lang.js');
-var Popover_vue_vue_type_script_lang = require('./popover/Popover.vue_vue&type=script&lang.js');
-var PopoverContainer_vue_vue_type_script_lang = require('./popover/PopoverContainer.vue_vue&type=script&lang.js');
-var PopoverItem_vue_vue_type_script_lang = require('./popover/PopoverItem.vue_vue&type=script&lang.js');
-var Progress_vue_vue_type_script_lang = require('./progress/Progress.vue_vue&type=script&lang.js');
-var Radio_vue_vue_type_script_lang = require('./radio/Radio.vue_vue&type=script&lang.js');
-var Select_vue_vue_type_script_lang = require('./select/Select.vue_vue&type=script&lang.js');
-var Spinner_vue_vue_type_script_lang = require('./spinner/Spinner.vue_vue&type=script&lang.js');
-var Skeleton_vue_vue_type_script_lang = require('./skeleton/Skeleton.vue_vue&type=script&lang.js');
-var StatusDot_vue_vue_type_script_lang = require('./status/StatusDot.vue_vue&type=script&lang.js');
-var Table_vue_vue_type_script_lang = require('./table/Table.vue_vue&type=script&lang.js');
-var TableBody_vue_vue_type_script_lang = require('./table/TableBody.vue_vue&type=script&lang.js');
-var TableCell_vue_vue_type_script_lang = require('./table/TableCell.vue_vue&type=script&lang.js');
-var TableHead_vue_vue_type_script_lang = require('./table/TableHead.vue_vue&type=script&lang.js');
-var TableHeader_vue_vue_type_script_lang = require('./table/TableHeader.vue_vue&type=script&lang.js');
-var TableRow_vue_vue_type_script_lang = require('./table/TableRow.vue_vue&type=script&lang.js');
-var Tab_vue_vue_type_script_lang = require('./tabs/Tab.vue_vue&type=script&lang.js');
-var Tabs_vue_vue_type_script_lang = require('./tabs/Tabs.vue_vue&type=script&lang.js');
-var Tag_vue_vue_type_script_lang = require('./tag/Tag.vue_vue&type=script&lang.js');
-var Textarea_vue_vue_type_script_lang = require('./textarea/Textarea.vue_vue&type=script&lang.js');
-var Toast_vue_vue_type_script_lang = require('./toast/Toast.vue_vue&type=script&lang.js');
-var Toggle_vue_vue_type_script_lang = require('./toggle/Toggle.vue_vue&type=script&lang.js');
-var Tooltip_vue_vue_type_script_lang = require('./tooltip/Tooltip.vue_vue&type=script&lang.js');
+var Colors = require('./Colors.vue.js');
+var Avatar_vue_vue_type_script_lang = require('./avatar/Avatar.vue_vue_type_script_lang.js');
+var Button_vue_vue_type_script_lang = require('./button/Button.vue_vue_type_script_lang.js');
+var Card_vue_vue_type_script_lang = require('./card/Card.vue_vue_type_script_lang.js');
+var Checkbox_vue_vue_type_script_lang = require('./checkbox/Checkbox.vue_vue_type_script_lang.js');
+var Collapse_vue_vue_type_script_lang = require('./collapse/Collapse.vue_vue_type_script_lang.js');
+var Container_vue_vue_type_script_lang = require('./container/Container.vue_vue_type_script_lang.js');
+var Divider_vue_vue_type_script_lang = require('./divider/Divider.vue_vue_type_script_lang.js');
+var Form_vue_vue_type_script_lang = require('./form/Form.vue_vue_type_script_lang.js');
+var Icon_vue_vue_type_script_lang = require('./icon/Icon.vue_vue_type_script_lang.js');
+var Image_vue_vue_type_script_lang = require('./image/Image.vue_vue_type_script_lang.js');
+var Input_vue_vue_type_script_lang = require('./input/Input.vue_vue_type_script_lang.js');
+var Link_vue_vue_type_script_lang = require('./link/Link.vue_vue_type_script_lang.js');
+var Modal_vue_vue_type_script_lang = require('./modal/Modal.vue_vue_type_script_lang.js');
+var Note_vue_vue_type_script_lang = require('./note/Note.vue_vue_type_script_lang.js');
+var Pagination_vue_vue_type_script_lang = require('./pagination/Pagination.vue_vue_type_script_lang.js');
+var PaginationItem_vue_vue_type_script_lang = require('./pagination/PaginationItem.vue_vue_type_script_lang.js');
+var Popover_vue_vue_type_script_lang = require('./popover/Popover.vue_vue_type_script_lang.js');
+var PopoverContainer_vue_vue_type_script_lang = require('./popover/PopoverContainer.vue_vue_type_script_lang.js');
+var PopoverItem_vue_vue_type_script_lang = require('./popover/PopoverItem.vue_vue_type_script_lang.js');
+var Progress_vue_vue_type_script_lang = require('./progress/Progress.vue_vue_type_script_lang.js');
+var Radio_vue_vue_type_script_lang = require('./radio/Radio.vue_vue_type_script_lang.js');
+var Select_vue_vue_type_script_lang = require('./select/Select.vue_vue_type_script_lang.js');
+var Spinner_vue_vue_type_script_lang = require('./spinner/Spinner.vue_vue_type_script_lang.js');
+var Skeleton_vue_vue_type_script_lang = require('./skeleton/Skeleton.vue_vue_type_script_lang.js');
+var StatusDot_vue_vue_type_script_lang = require('./status/StatusDot.vue_vue_type_script_lang.js');
+var Table_vue_vue_type_script_lang = require('./table/Table.vue_vue_type_script_lang.js');
+var TableBody_vue_vue_type_script_lang = require('./table/TableBody.vue_vue_type_script_lang.js');
+var TableCell_vue_vue_type_script_lang = require('./table/TableCell.vue_vue_type_script_lang.js');
+var TableHead_vue_vue_type_script_lang = require('./table/TableHead.vue_vue_type_script_lang.js');
+var TableHeader_vue_vue_type_script_lang = require('./table/TableHeader.vue_vue_type_script_lang.js');
+var TableRow_vue_vue_type_script_lang = require('./table/TableRow.vue_vue_type_script_lang.js');
+var Tab_vue_vue_type_script_lang = require('./tabs/Tab.vue_vue_type_script_lang.js');
+var Tabs_vue_vue_type_script_lang = require('./tabs/Tabs.vue_vue_type_script_lang.js');
+var Tag_vue_vue_type_script_lang = require('./tag/Tag.vue_vue_type_script_lang.js');
+var Textarea_vue_vue_type_script_lang = require('./textarea/Textarea.vue_vue_type_script_lang.js');
+var Toast_vue_vue_type_script_lang = require('./toast/Toast.vue_vue_type_script_lang.js');
+var Toggle_vue_vue_type_script_lang = require('./toggle/Toggle.vue_vue_type_script_lang.js');
+var Tooltip_vue_vue_type_script_lang = require('./tooltip/Tooltip.vue_vue_type_script_lang.js');
 
 
 
 exports.Spacer = Spacer;
+exports.Colors = Colors;
 exports.Avatar = Avatar_vue_vue_type_script_lang;
 exports.Button = Button_vue_vue_type_script_lang;
 exports.Card = Card_vue_vue_type_script_lang;
@@ -53,6 +56,7 @@ exports.Container = Container_vue_vue_type_script_lang;
 exports.Divider = Divider_vue_vue_type_script_lang;
 exports.Form = Form_vue_vue_type_script_lang;
 exports.Icon = Icon_vue_vue_type_script_lang;
+exports.Image = Image_vue_vue_type_script_lang;
 exports.Input = Input_vue_vue_type_script_lang;
 exports.Link = Link_vue_vue_type_script_lang;
 exports.Modal = Modal_vue_vue_type_script_lang;

package/lib/cjs/components/input/Input.vue.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var Input_vue_vue_type_script_lang = require('./Input.vue_vue&type=script&lang.js');
-var Input_vue_vue_type_template_id_046941e3_lang = require('./Input.vue_vue&type=template&id=046941e3&lang.js');
+var Input_vue_vue_type_script_lang = require('./Input.vue_vue_type_script_lang.js');
+var Input_vue_vue_type_template_id_0a66306d_lang = require('./Input.vue_vue_type_template_id_0a66306d_lang.js');
 
-Input_vue_vue_type_script_lang.render = Input_vue_vue_type_template_id_046941e3_lang.render;
+Input_vue_vue_type_script_lang.render = Input_vue_vue_type_template_id_0a66306d_lang.render;
 
 module.exports = Input_vue_vue_type_script_lang;

package/lib/cjs/components/input/Input.vue_vue_type_script_lang.js

@@ -0,0 +1,101 @@
+'use strict';
+
+var inputtable = require('../../composables/inputtable.js');
+
+var script = {
+  name: 'XInput',
+
+  validator: inputtable.withValidator(),
+
+  props: {
+    ...inputtable.withProps(),
+
+    showPasswordToggle: {
+      type: Boolean,
+      default: true,
+    },
+
+    label: {
+      type: String,
+      default: '',
+    },
+
+    iconRight: {
+      type: Boolean,
+      default: false,
+    },
+
+    dir: {
+      type: String,
+      default: 'ltr',
+    },
+
+    max: {
+      type: Number,
+      default: null,
+    },
+
+    maxlength: {
+      type: Number,
+      default: null,
+    },
+
+    min: {
+      type: Number,
+      default: null,
+    },
+
+    minlength: {
+      type: Number,
+      default: null,
+    },
+
+    placeholder: {
+      type: String,
+      default: null,
+    },
+
+    type: {
+      type: String,
+      default: 'text',
+    },
+
+    inputClass: {
+      type: String,
+      default: '',
+    },
+  },
+
+  emits: inputtable.withEmits(),
+
+  setup(props, { attrs, emit }) {
+    return {
+      ...inputtable.useInputtable(props, { attrs, emit }),
+    }
+  },
+
+  data() {
+    return {
+      currentType: this.type,
+    }
+  },
+
+  methods: {
+    onChange(e) {
+      if (this.type === 'number') {
+        if (this.min !== null) {
+          if (e.target.value < this.min) e.target.value = this.min;
+        }
+
+        if (this.max !== null) {
+          if (e.target.value > this.max) e.target.value = this.max;
+        }
+      }
+    },
+    togglePasswordVisibility() {
+      this.currentType = this.currentType === 'password' ? 'text' : 'password';
+    },
+  },
+};
+
+module.exports = script;

package/lib/cjs/components/input/{Input.vue_vue&type=template&id=046941e3&lang.js → Input.vue_vue_type_template_id_0a66306d_lang.js}

@@ -4,91 +4,90 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 
-const _hoisted_1 = ["textContent"];
-const _hoisted_2 = { class: "relative" };
-const _hoisted_3 = ["disabled", "max", "maxlength", "min", "dir", "minlength", "name", "placeholder", "readonly", "type", "value"];
-const _hoisted_4 = /*#__PURE__*/vue.createElementVNode("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }, null, -1);
-const _hoisted_5 = /*#__PURE__*/vue.createElementVNode("circle", {
+const _hoisted_1 = { class: "inline-block mb-1 relative" };
+const _hoisted_2 = ["textContent"];
+const _hoisted_3 = { class: "relative" };
+const _hoisted_4 = ["disabled", "max", "maxlength", "min", "dir", "minlength", "name", "placeholder", "readonly", "type", "value"];
+const _hoisted_5 = /*#__PURE__*/vue.createElementVNode("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }, null, -1);
+const _hoisted_6 = /*#__PURE__*/vue.createElementVNode("circle", {
   cx: "12",
   cy: "12",
   r: "3"
 }, null, -1);
-const _hoisted_6 = /*#__PURE__*/vue.createElementVNode("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }, null, -1);
-const _hoisted_7 = /*#__PURE__*/vue.createElementVNode("line", {
+const _hoisted_7 = /*#__PURE__*/vue.createElementVNode("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }, null, -1);
+const _hoisted_8 = /*#__PURE__*/vue.createElementVNode("line", {
   x1: "1",
   y1: "1",
   x2: "23",
   y2: "23"
 }, null, -1);
-const _hoisted_8 = ["textContent"];
+const _hoisted_9 = ["textContent"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("label", {
-    class: vue.normalizeClass(["block mb-1 relative", $props.hideDetails ? 'pb-2' : 'pb-6'])
-  }, [
+  return (vue.openBlock(), vue.createElementBlock("label", _hoisted_1, [
     ($props.label)
       ? (vue.openBlock(), vue.createElementBlock("p", {
           key: 0,
           class: vue.normalizeClass(["font-medium text-gray-800 dark:text-gray-200 mb-1", {
-        'text-xs': $props.size === 'xs',
-        'text-sm': $props.size === 'sm',
-        'text-lg': $props.size === 'lg',
-        'text-xl': $props.size === 'xl',
+        'text-xs': _ctx.size === 'xs',
+        'text-sm': _ctx.size === 'sm',
+        'text-lg': _ctx.size === 'lg',
+        'text-xl': _ctx.size === 'xl',
       }]),
           textContent: vue.toDisplayString($props.label)
-        }, null, 10, _hoisted_1))
+        }, null, 10, _hoisted_2))
       : vue.createCommentVNode("", true),
-    vue.createElementVNode("div", _hoisted_2, [
+    vue.createElementVNode("div", _hoisted_3, [
       (_ctx.$slots.icon)
         ? (vue.openBlock(), vue.createElementBlock("span", {
             key: 0,
-            class: vue.normalizeClass(["flex items-center w-5 h-5 text-gray-500 absolute my-auto ml-2 inset-y-0", [{
-          'mr-2 left-0': _ctx.$slots.icon && !$props.iconRight,
-          'ml-2 right-0': _ctx.$slots.icon && $props.iconRight,
+            class: vue.normalizeClass(["flex items-center w-5 h-5 text-gray-500 absolute my-auto inset-y-0", [{
+          'ml-2 left-0': _ctx.$slots.icon && !$props.iconRight,
+          'mr-2 right-0': _ctx.$slots.icon && $props.iconRight,
         }]])
           }, [
             vue.renderSlot(_ctx.$slots, "icon")
           ], 2))
         : vue.createCommentVNode("", true),
       vue.createElementVNode("input", vue.mergeProps({
-        ref: "input",
+        ref: "focusRef",
         class: ["appearance-none block w-full text-gray-700 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-600 rounded-form leading-tight focus:outline-none focus:border-primary-500 dark:focus:border-primary-500 transition-colors duration-150 ease-in-out border-gray-300 dark:border-gray-700", [
-          $props.disabled ? 'bg-gray-200 dark:bg-gray-800 cursor-not-allowed' : 'bg-white dark:bg-gray-900',
-          $props.type === 'password' ? 'pr-9' : ($props.flat ? '' : 'pr-4'),
-          $props.flat ? 'p-0 bg-transparent' : {
+          _ctx.disabled ? 'bg-gray-200 dark:bg-gray-800 cursor-not-allowed' : 'bg-white dark:bg-gray-900',
+          $props.type === 'password' ? 'pr-9' : (_ctx.flat ? '' : 'pr-4'),
+          _ctx.flat ? 'p-0 bg-transparent' : {
             // shadow
             'border shadow': true,
 
             // size
-            'py-1': $props.size === 'auto',
-            'px-2 py-1 text-xs': $props.size === 'xs',
-            'px-2 py-1 text-sm': $props.size === 'sm',
-            'px-3 py-2': !['auto', 'xs', 'sm', 'lg', 'xl'].includes($props.size),
-            'px-4 py-3 text-lg': $props.size === 'lg',
-            'px-6 py-6 text-xl': $props.size === 'xl',
+            'py-1': _ctx.size === 'auto',
+            'px-2 py-1 text-xs': _ctx.size === 'xs',
+            'px-2 py-1 text-sm': _ctx.size === 'sm',
+            'px-3 py-2': !['auto', 'xs', 'sm', 'lg', 'xl'].includes(_ctx.size),
+            'px-4 py-3 text-lg': _ctx.size === 'lg',
+            'px-6 py-6 text-xl': _ctx.size === 'xl',
           },
           {
             '!pl-9': _ctx.$slots.icon && !$props.iconRight,
             '!pr-9': _ctx.$slots.icon && $props.iconRight,
             // error
-            'border-error-500 focus:border-error-500 dark:focus:border-error-500': $data.errorInternal,
+            'border-error-500 focus:border-error-500 dark:focus:border-error-500': _ctx.errorInternal,
           },
           $props.inputClass,
         ]],
-        disabled: $props.disabled,
+        disabled: _ctx.disabled,
         max: $props.max,
         maxlength: $props.maxlength,
         min: $props.min,
         dir: $props.dir,
         minlength: $props.minlength,
-        name: $props.name,
+        name: _ctx.name,
         placeholder: $props.placeholder,
-        readonly: $props.readonly,
+        readonly: _ctx.readonly,
         type: $data.currentType,
-        value: $props.value
-      }, _ctx.$attrs, {
+        value: _ctx.modelValue
+      }, vue.toHandlers(_ctx.inputListeners), {
         onChange: _cache[0] || (_cache[0] = (...args) => ($options.onChange && $options.onChange(...args)))
-      }), null, 16, _hoisted_3),
+      }), null, 16, _hoisted_4),
       ($props.type === 'password' && $props.showPasswordToggle)
         ? (vue.openBlock(), vue.createElementBlock("svg", {
             key: 1,
@@ -104,24 +103,24 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }, [
             ($data.currentType === 'password')
               ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                  _hoisted_4,
-                  _hoisted_5
+                  _hoisted_5,
+                  _hoisted_6
                 ], 64))
               : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                  _hoisted_6,
-                  _hoisted_7
+                  _hoisted_7,
+                  _hoisted_8
                 ], 64))
           ]))
         : vue.createCommentVNode("", true)
     ]),
-    ($data.errorInternal)
+    (_ctx.errorInternal)
       ? (vue.openBlock(), vue.createElementBlock("p", {
           key: 1,
           class: "text-sm text-error-500 mt-1",
-          textContent: vue.toDisplayString($data.errorInternal)
-        }, null, 8, _hoisted_8))
+          textContent: vue.toDisplayString(_ctx.errorInternal)
+        }, null, 8, _hoisted_9))
       : vue.createCommentVNode("", true)
-  ], 2))
+  ]))
 }
 
 exports.render = render;

package/lib/cjs/components/link/Link.vue.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var Link_vue_vue_type_script_lang = require('./Link.vue_vue&type=script&lang.js');
-var Link_vue_vue_type_template_id_cd8b503c_lang = require('./Link.vue_vue&type=template&id=cd8b503c&lang.js');
+var Link_vue_vue_type_script_lang = require('./Link.vue_vue_type_script_lang.js');
+var Link_vue_vue_type_template_id_291038eb_lang = require('./Link.vue_vue_type_template_id_291038eb_lang.js');
 
-Link_vue_vue_type_script_lang.render = Link_vue_vue_type_template_id_cd8b503c_lang.render;
+Link_vue_vue_type_script_lang.render = Link_vue_vue_type_template_id_291038eb_lang.render;
 
 module.exports = Link_vue_vue_type_script_lang;

package/lib/cjs/components/link/{Link.vue_vue&type=template&id=cd8b503c&lang.js → Link.vue_vue_type_template_id_291038eb_lang.js}

@@ -29,23 +29,23 @@ const _hoisted_2 = /*#__PURE__*/vue.createElementVNode("svg", {
 ], -1);
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$props.to ? 'router-link' : _ctx.$props.tag), vue.mergeProps(_ctx.$attrs, {
-    to: _ctx.$props.to,
-    class: ["transition-colors duration-150 ease-in-out cursor-pointer", [
+  return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.to ? 'router-link' : $props.tag), {
+    to: $props.to,
+    class: vue.normalizeClass(["transition-colors duration-150 ease-in-out cursor-pointer", [
       {
         // color
-        'hover:text-gray-600 dark:hover:text-gray-300': _ctx.$props.color === 'gray',
-        'text-primary-500 hover:text-primary-700': _ctx.$props.color === 'primary',
-        'text-error-500 hover:text-error-700': _ctx.$props.color === 'error',
-        'text-warning-500 hover:text-warning-700': _ctx.$props.color === 'warning',
-        'text-success-500 hover:text-success-700': _ctx.$props.color === 'success',
+        'hover:text-gray-600 dark:hover:text-gray-300': $props.color === 'gray',
+        'text-primary-500 hover:text-primary-600': $props.color === 'primary',
+        'text-error-500 hover:text-error-600': $props.color === 'error',
+        'text-warning-500 hover:text-warning-600': $props.color === 'warning',
+        'text-success-500 hover:text-success-600': $props.color === 'success',
         // underline
-        'underline': _ctx.$props.underline
+        'underline': $props.underline
       },
-    ]]
-  }), {
+    ]])
+  }, {
     default: vue.withCtx(() => [
-      (_ctx.$props.external)
+      ($props.external)
         ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, [
             vue.renderSlot(_ctx.$slots, "default"),
             _hoisted_2
@@ -53,7 +53,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         : vue.renderSlot(_ctx.$slots, "default", { key: 1 })
     ]),
     _: 3
-  }, 16, ["to", "class"]))
+  }, 8, ["to", "class"]))
 }
 
 exports.render = render;

package/lib/cjs/components/modal/Modal.vue.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var Modal_vue_vue_type_script_lang = require('./Modal.vue_vue&type=script&lang.js');
-var Modal_vue_vue_type_template_id_31c76cbc_lang = require('./Modal.vue_vue&type=template&id=31c76cbc&lang.js');
+var Modal_vue_vue_type_script_lang = require('./Modal.vue_vue_type_script_lang.js');
+var Modal_vue_vue_type_template_id_1597a9fe_lang = require('./Modal.vue_vue_type_template_id_1597a9fe_lang.js');
 
-Modal_vue_vue_type_script_lang.render = Modal_vue_vue_type_template_id_31c76cbc_lang.render;
+Modal_vue_vue_type_script_lang.render = Modal_vue_vue_type_template_id_1597a9fe_lang.render;
 
 module.exports = Modal_vue_vue_type_script_lang;

package/lib/cjs/components/modal/{Modal.vue_vue&type=template&id=31c76cbc&lang.js → Modal.vue_vue_type_template_id_1597a9fe_lang.js}

@@ -69,7 +69,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         ($props.showClose)
           ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
-              class: "absolute rounded-full bg-white -top-4 -right-4 w-10 h-10 shadow-md flex items-center justify-center cursor-pointer",
+              class: "absolute rounded-md bg-white -top-4 -right-2 w-8 h-8 shadow-md flex items-center justify-center cursor-pointer",
               onClick: _cache[1] || (_cache[1] = $event => ($options.close()))
             }, _hoisted_3))
           : vue.createCommentVNode("", true)

package/lib/cjs/components/note/Note.vue.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var Note_vue_vue_type_script_lang = require('./Note.vue_vue&type=script&lang.js');
-var Note_vue_vue_type_template_id_ea427b4c_lang = require('./Note.vue_vue&type=template&id=ea427b4c&lang.js');
+var Note_vue_vue_type_script_lang = require('./Note.vue_vue_type_script_lang.js');
+var Note_vue_vue_type_template_id_79616501_lang = require('./Note.vue_vue_type_template_id_79616501_lang.js');
 
-Note_vue_vue_type_script_lang.render = Note_vue_vue_type_template_id_ea427b4c_lang.render;
+Note_vue_vue_type_script_lang.render = Note_vue_vue_type_template_id_79616501_lang.render;
 
 module.exports = Note_vue_vue_type_script_lang;

package/lib/cjs/components/{skeleton/Skeleton.vue_vue&type=script&lang.js → note/Note.vue_vue_type_script_lang.js}

@@ -1,10 +1,10 @@
 'use strict';
 
 var script = {
-  name: 'XSkeleton',
+  name: 'XNote',
 
   props: {
-    rounded: {
+    filled: {
       type: Boolean,
       default: false,
     },
@@ -13,6 +13,11 @@ var script = {
       type: String,
       default: 'div',
     },
+
+    color: {
+      type: String,
+      default: 'primary',
+    },
   },
 };
 

package/lib/cjs/components/note/{Note.vue_vue&type=template&id=ea427b4c&lang.js → Note.vue_vue_type_template_id_79616501_lang.js}

@@ -51,47 +51,33 @@ const _hoisted_13 = {
 };
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$props.tag), vue.mergeProps(_ctx.$attrs, {
-    class: ["flex rounded-md p-2", [
-      {
-        'border': !_ctx.$props.filled,
-        'text-blue-500 border-blue-500': !_ctx.$props.filled && _ctx.$props.variant === 'info',
-        'text-success-500 border-success-500': !_ctx.$props.filled && _ctx.$props.variant === 'success',
-        'text-error-500 border-error-500': !_ctx.$props.filled && _ctx.$props.variant === 'error',
-        'text-warning-500 border-warning-500': !_ctx.$props.filled && _ctx.$props.variant === 'warning',
-        // filled
-        'bg-blue-500 text-blue-50': _ctx.$props.filled && _ctx.$props.variant === 'info',
-        'bg-success-500 text-success-50': _ctx.$props.filled && _ctx.$props.variant === 'success',
-        'bg-error-500 text-error-50': _ctx.$props.filled && _ctx.$props.variant === 'error',
-        'bg-warning-500 text-warning-50': _ctx.$props.filled && _ctx.$props.variant === 'warning',
-      },
-
-    ]]
-  }), {
+  return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.tag), {
+    class: vue.normalizeClass(["flex rounded-md p-2", $props.filled ? [`bg-${$props.color}-500 text-${$props.color}-50`] : [`border text-${$props.color}-500 border-${$props.color}-500`]])
+  }, {
     default: vue.withCtx(() => [
       (!_ctx.$slots.icon)
         ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1, [
-            (_ctx.$props.variant === 'info')
+            ($props.color === 'primary')
               ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                   _hoisted_2,
                   _hoisted_3,
                   _hoisted_4
                 ], 64))
               : vue.createCommentVNode("", true),
-            (_ctx.$props.variant === 'success')
+            ($props.color === 'success')
               ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
                   _hoisted_5,
                   _hoisted_6
                 ], 64))
               : vue.createCommentVNode("", true),
-            (_ctx.$props.variant === 'error')
+            ($props.color === 'error')
               ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
                   _hoisted_7,
                   _hoisted_8,
                   _hoisted_9
                 ], 64))
               : vue.createCommentVNode("", true),
-            (_ctx.$props.variant === 'warning')
+            ($props.color === 'warning')
               ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
                   _hoisted_10,
                   _hoisted_11,
@@ -108,7 +94,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       vue.renderSlot(_ctx.$slots, "default")
     ]),
     _: 3
-  }, 16, ["class"]))
+  }, 8, ["class"]))
 }
 
 exports.render = render;

package/lib/cjs/components/pagination/Pagination.vue.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var Pagination_vue_vue_type_script_lang = require('./Pagination.vue_vue&type=script&lang.js');
-var Pagination_vue_vue_type_template_id_0f4659a9_lang = require('./Pagination.vue_vue&type=template&id=0f4659a9&lang.js');
+var Pagination_vue_vue_type_script_lang = require('./Pagination.vue_vue_type_script_lang.js');
+var Pagination_vue_vue_type_template_id_7b1569fe_lang = require('./Pagination.vue_vue_type_template_id_7b1569fe_lang.js');
 
-Pagination_vue_vue_type_script_lang.render = Pagination_vue_vue_type_template_id_0f4659a9_lang.render;
+Pagination_vue_vue_type_script_lang.render = Pagination_vue_vue_type_template_id_7b1569fe_lang.render;
 
 module.exports = Pagination_vue_vue_type_script_lang;