@indielayer/ui 0.1.0 → 0.2.2

package/lib/esm/components/form/Form.vue_vue_type_script_lang.js

@@ -0,0 +1,93 @@
+import { provide, onMounted, watch, nextTick } from 'vue';
+
+var script = {
+  name: 'XForm',
+  inheritAttrs: false,
+  props: {
+    autoValidate: {
+      type: Boolean,
+      default: true,
+    },
+    autoFocus: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    errors: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  setup(props, { emit }) {
+    const inputs = [];
+
+    provide('form', {
+      registerInput: (name, { focus, validate, setError }) => {
+        const exists = inputs.find((i) => i.name === name);
+
+        if (exists) {
+          exists.focus = focus;
+          exists.validate = validate;
+          exists.setError = setError;
+        }
+        else inputs.push({ name, focus, validate, setError });
+      },
+      unregisterInput: (name) => {
+        const index = inputs.findIndex((i) => i.name === name);
+
+        inputs.splice(index, 1);
+      },
+    });
+
+    onMounted(() => {
+      if (props.autoFocus && inputs && inputs.length > 0) inputs[0].focus();
+    });
+
+    watch(() => props.errors, (errors) => {
+      nextTick(() => {
+        errors.forEach((error) => {
+          const input = inputs.find((i) => i.name === error.field);
+
+          if (input) input.setError(error.msg);
+        });
+      });
+    });
+
+    const validate = () => {
+      let isFormValid = true;
+
+      inputs.forEach((input) => {
+        const isInputValid = input.validate();
+
+        if (!isInputValid && isFormValid) {
+          isFormValid = false;
+
+          // focus on input error
+          if (input.focus) input.focus();
+        }
+      });
+
+      return isFormValid
+    };
+
+    const submit = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const isFormValid = props.autoValidate ? validate() : true;
+
+      emit('submit', isFormValid);
+    };
+
+    return {
+      validate,
+      submit,
+    }
+  },
+};
+
+export { script as default };

package/lib/esm/{src/components/form/Form.vue_vue&type=template&id=341983a2&lang.js → components/form/Form.vue_vue_type_template_id_bf90a49e_lang.js}

@@ -4,8 +4,8 @@ const _hoisted_1 = ["disabled"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("form", {
-    onSubmit: _cache[0] || (_cache[0] = (...args) => ($options.submit && $options.submit(...args))),
-    onKeypress: _cache[1] || (_cache[1] = withKeys((...args) => ($options.submit && $options.submit(...args)), ["enter"]))
+    onSubmit: _cache[0] || (_cache[0] = (...args) => ($setup.submit && $setup.submit(...args))),
+    onKeypress: _cache[1] || (_cache[1] = withKeys((...args) => ($setup.submit && $setup.submit(...args)), ["enter"]))
   }, [
     createElementVNode("fieldset", { disabled: $props.disabled }, [
       renderSlot(_ctx.$slots, "default")

package/lib/esm/components/icon/Icon.vue.js

@@ -0,0 +1,5 @@
+import script from './Icon.vue_vue_type_script_lang.js';
+export { default } from './Icon.vue_vue_type_script_lang.js';
+import { render } from './Icon.vue_vue_type_template_id_4fe868d3_lang.js';
+
+script.render = render;

package/lib/esm/{src/components/icon/Icon.vue_vue&type=script&lang.js → components/icon/Icon.vue_vue_type_script_lang.js}

@@ -1,16 +1,17 @@
+import { withValidator, withProps } from '../../composables/common.js';
+
 var script = {
   name: 'XIcon',
 
+  validator: withValidator(),
+
   props: {
+    ...withProps(),
+
     icon: {
       type: String,
       required: true,
     },
-
-    size: {
-      type: String,
-      default: null,
-    },
   },
 
   computed: {

package/lib/esm/components/icon/Icon.vue_vue_type_template_id_4fe868d3_lang.js

@@ -0,0 +1,28 @@
+import { openBlock, createElementBlock, normalizeClass, createElementVNode } from 'vue';
+
+const _hoisted_1 = ["innerHTML"];
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("svg", {
+    class: normalizeClass(["stroke-2 inline-block", [
+      {
+        'h-3 w-3': _ctx.size === 'xs',
+        'h-4 w-4': _ctx.size === 'sm',
+        'h-5 w-5': !['xs', 'sm', 'xl'].includes(_ctx.size),
+        'h-6 w-6': _ctx.size === 'xl',
+      },
+    ]]),
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, [
+    createElementVNode("g", {
+      innerHTML: $options.icons[$props.icon] ? $options.icons[$props.icon] : $props.icon
+    }, null, 8, _hoisted_1)
+  ], 2))
+}
+
+export { render };

package/lib/esm/components/image/Image.vue.js

@@ -0,0 +1,5 @@
+import script from './Image.vue_vue_type_script_lang.js';
+export { default } from './Image.vue_vue_type_script_lang.js';
+import { render } from './Image.vue_vue_type_template_id_d7718e2c_lang.js';
+
+script.render = render;

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

@@ -0,0 +1,26 @@
+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;
+  },
+};
+
+export { script as default };

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

@@ -0,0 +1,9 @@
+import { openBlock, createElementBlock } from 'vue';
+
+const _hoisted_1 = ["src"];
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("img", { src: $data.source }, null, 8, _hoisted_1))
+}
+
+export { render };

package/lib/esm/components/index.js

@@ -0,0 +1,40 @@
+export { default as Spacer } from './spacer/Spacer.vue.js';
+export { default as Colors } from './colors.vue.js';
+export { default as Avatar } from './avatar/Avatar.vue_vue_type_script_lang.js';
+export { default as Button } from './button/Button.vue_vue_type_script_lang.js';
+export { default as Card } from './card/Card.vue_vue_type_script_lang.js';
+export { default as Checkbox } from './checkbox/Checkbox.vue_vue_type_script_lang.js';
+export { default as Collapse } from './collapse/Collapse.vue_vue_type_script_lang.js';
+export { default as Container } from './container/Container.vue_vue_type_script_lang.js';
+export { default as Divider } from './divider/Divider.vue_vue_type_script_lang.js';
+export { default as Form } from './form/Form.vue_vue_type_script_lang.js';
+export { default as Icon } from './icon/Icon.vue_vue_type_script_lang.js';
+export { default as Image } from './image/Image.vue_vue_type_script_lang.js';
+export { default as Input } from './input/Input.vue_vue_type_script_lang.js';
+export { default as Link } from './link/Link.vue_vue_type_script_lang.js';
+export { default as Modal } from './modal/Modal.vue_vue_type_script_lang.js';
+export { default as Note } from './note/Note.vue_vue_type_script_lang.js';
+export { default as Pagination } from './pagination/Pagination.vue_vue_type_script_lang.js';
+export { default as PaginationItem } from './pagination/PaginationItem.vue_vue_type_script_lang.js';
+export { default as Popover } from './popover/Popover.vue_vue_type_script_lang.js';
+export { default as PopoverContainer } from './popover/PopoverContainer.vue_vue_type_script_lang.js';
+export { default as PopoverItem } from './popover/PopoverItem.vue_vue_type_script_lang.js';
+export { default as Progress } from './progress/Progress.vue_vue_type_script_lang.js';
+export { default as Radio } from './radio/Radio.vue_vue_type_script_lang.js';
+export { default as Select } from './select/Select.vue_vue_type_script_lang.js';
+export { default as Spinner } from './spinner/Spinner.vue_vue_type_script_lang.js';
+export { default as Skeleton } from './skeleton/Skeleton.vue_vue_type_script_lang.js';
+export { default as StatusDot } from './status/StatusDot.vue_vue_type_script_lang.js';
+export { default as Table } from './table/Table.vue_vue_type_script_lang.js';
+export { default as TableBody } from './table/TableBody.vue_vue_type_script_lang.js';
+export { default as TableCell } from './table/TableCell.vue_vue_type_script_lang.js';
+export { default as TableHead } from './table/TableHead.vue_vue_type_script_lang.js';
+export { default as TableHeader } from './table/TableHeader.vue_vue_type_script_lang.js';
+export { default as TableRow } from './table/TableRow.vue_vue_type_script_lang.js';
+export { default as Tab } from './tabs/Tab.vue_vue_type_script_lang.js';
+export { default as Tabs } from './tabs/Tabs.vue_vue_type_script_lang.js';
+export { default as Tag } from './tag/Tag.vue_vue_type_script_lang.js';
+export { default as Textarea } from './textarea/Textarea.vue_vue_type_script_lang.js';
+export { default as Toast } from './toast/Toast.vue_vue_type_script_lang.js';
+export { default as Toggle } from './toggle/Toggle.vue_vue_type_script_lang.js';
+export { default as Tooltip } from './tooltip/Tooltip.vue_vue_type_script_lang.js';

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

@@ -0,0 +1,5 @@
+import script from './Input.vue_vue_type_script_lang.js';
+export { default } from './Input.vue_vue_type_script_lang.js';
+import { render } from './Input.vue_vue_type_template_id_0a66306d_lang.js';
+
+script.render = render;

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

@@ -0,0 +1,99 @@
+import { withValidator, withProps, withEmits, useInputtable } from '../../composables/inputtable.js';
+
+var script = {
+  name: 'XInput',
+
+  validator: withValidator(),
+
+  props: {
+    ...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: withEmits(),
+
+  setup(props, { attrs, emit }) {
+    return {
+      ...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';
+    },
+  },
+};
+
+export { script as default };

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

@@ -1,90 +1,89 @@
-import { openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, createElementVNode, renderSlot, mergeProps, Fragment } from 'vue';
+import { openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, createElementVNode, renderSlot, mergeProps, toHandlers, Fragment } from '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__*/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__*/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__*/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__*/createElementVNode("circle", {
   cx: "12",
   cy: "12",
   r: "3"
 }, null, -1);
-const _hoisted_6 = /*#__PURE__*/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__*/createElementVNode("line", {
+const _hoisted_7 = /*#__PURE__*/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__*/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 (openBlock(), createElementBlock("label", {
-    class: normalizeClass(["block mb-1 relative", $props.hideDetails ? 'pb-2' : 'pb-6'])
-  }, [
+  return (openBlock(), createElementBlock("label", _hoisted_1, [
     ($props.label)
       ? (openBlock(), createElementBlock("p", {
           key: 0,
           class: 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: toDisplayString($props.label)
-        }, null, 10, _hoisted_1))
+        }, null, 10, _hoisted_2))
       : createCommentVNode("", true),
-    createElementVNode("div", _hoisted_2, [
+    createElementVNode("div", _hoisted_3, [
       (_ctx.$slots.icon)
         ? (openBlock(), createElementBlock("span", {
             key: 0,
-            class: 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: 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,
         }]])
           }, [
             renderSlot(_ctx.$slots, "icon")
           ], 2))
         : createCommentVNode("", true),
       createElementVNode("input", 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
+      }, 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)
         ? (openBlock(), createElementBlock("svg", {
             key: 1,
@@ -100,24 +99,24 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }, [
             ($data.currentType === 'password')
               ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                  _hoisted_4,
-                  _hoisted_5
+                  _hoisted_5,
+                  _hoisted_6
                 ], 64))
               : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                  _hoisted_6,
-                  _hoisted_7
+                  _hoisted_7,
+                  _hoisted_8
                 ], 64))
           ]))
         : createCommentVNode("", true)
     ]),
-    ($data.errorInternal)
+    (_ctx.errorInternal)
       ? (openBlock(), createElementBlock("p", {
           key: 1,
           class: "text-sm text-error-500 mt-1",
-          textContent: toDisplayString($data.errorInternal)
-        }, null, 8, _hoisted_8))
+          textContent: toDisplayString(_ctx.errorInternal)
+        }, null, 8, _hoisted_9))
       : createCommentVNode("", true)
-  ], 2))
+  ]))
 }
 
 export { render };

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

@@ -0,0 +1,5 @@
+import script from './Link.vue_vue_type_script_lang.js';
+export { default } from './Link.vue_vue_type_script_lang.js';
+import { render } from './Link.vue_vue_type_template_id_291038eb_lang.js';
+
+script.render = render;

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

@@ -1,4 +1,4 @@
-import { openBlock, createBlock, resolveDynamicComponent, mergeProps, withCtx, createElementBlock, renderSlot, createElementVNode } from 'vue';
+import { openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, renderSlot, createElementVNode } from 'vue';
 
 const _hoisted_1 = {
   key: 0,
@@ -25,23 +25,23 @@ const _hoisted_2 = /*#__PURE__*/createElementVNode("svg", {
 ], -1);
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createBlock(resolveDynamicComponent(_ctx.$props.to ? 'router-link' : _ctx.$props.tag), mergeProps(_ctx.$attrs, {
-    to: _ctx.$props.to,
-    class: ["transition-colors duration-150 ease-in-out cursor-pointer", [
+  return (openBlock(), createBlock(resolveDynamicComponent($props.to ? 'router-link' : $props.tag), {
+    to: $props.to,
+    class: 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: withCtx(() => [
-      (_ctx.$props.external)
+      ($props.external)
         ? (openBlock(), createElementBlock("span", _hoisted_1, [
             renderSlot(_ctx.$slots, "default"),
             _hoisted_2
@@ -49,7 +49,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         : renderSlot(_ctx.$slots, "default", { key: 1 })
     ]),
     _: 3
-  }, 16, ["to", "class"]))
+  }, 8, ["to", "class"]))
 }
 
 export { render };

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

@@ -0,0 +1,5 @@
+import script from './Modal.vue_vue_type_script_lang.js';
+export { default } from './Modal.vue_vue_type_script_lang.js';
+import { render } from './Modal.vue_vue_type_template_id_1597a9fe_lang.js';
+
+script.render = render;

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

@@ -65,7 +65,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         ($props.showClose)
           ? (openBlock(), 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))
           : createCommentVNode("", true)

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

@@ -0,0 +1,5 @@
+import script from './Note.vue_vue_type_script_lang.js';
+export { default } from './Note.vue_vue_type_script_lang.js';
+import { render } from './Note.vue_vue_type_template_id_79616501_lang.js';
+
+script.render = render;

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

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