@indielayer/ui 0.1.1 → 0.2.0

package/lib/cjs/components/button/Button.vue_vue_type_template_id_1be5b88c_lang.js

@@ -0,0 +1,100 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_x_spinner = vue.resolveComponent("x-spinner");
+  const _component_x_icon = vue.resolveComponent("x-icon");
+
+  return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.to ? 'router-link' : $props.tag), {
+    ref: "focusRef",
+    to: $props.to,
+    class: vue.normalizeClass(["relative leading-tight transition-colors duration-150 cursor-pointer focus:outline-none inline-block items-center justify-center font-medium", [
+      {
+        'shadow': !_ctx.flat && !$props.glow,
+        [`shadow-lg shadow-${_ctx.color}-500/50`]: !_ctx.flat && $props.glow,
+      },
+      _ctx.disabled ?
+        // disabled
+        'border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 cursor-not-allowed'
+        : {
+          // not disabled
+          [`border border-${_ctx.color}-500 text-${_ctx.color}-500`]: $props.outlined,
+
+          // colors
+          [`border border-transparent text-${_ctx.color}-50 bg-${_ctx.color}-500`]: !$props.outlined,
+
+          // colors hovers | actives
+          'hover:bg-dark-image active:bg-darker-image active:shadow-none': !_ctx.loading && !$props.outlined,
+          [`hover:bg-gray-100 active:bg-gray-200 dark:hover:bg-gray-700 dark:hover:active:bg-gray-600`]: !_ctx.loading && $props.outlined,
+        },
+      _ctx.$slots.default ? {
+        // size
+        'py-1': _ctx.size === 'auto',
+        'px-2 py-1 text-xs': _ctx.size === 'xs',
+        'px-2 py-1 text-sm': _ctx.size === 'sm',
+        'px-4 py-2': !['auto', 'xs', 'sm', 'lg', 'xl'].includes(_ctx.size),
+        'px-6 py-3 text-lg': _ctx.size === 'lg',
+        'px-10 py-6 text-xl': _ctx.size === 'xl',
+      } : 'px-3 py-2',
+      {
+        // icon
+        'inline-flex items-center': $props.icon,
+
+        // group
+        'rounded-button': $props.group === false,
+        'rounded-l-button': $props.group === 'first',
+        'rounded-r-button': $props.group === 'last',
+
+        '!rounded-full': $props.rounded,
+
+        // loading
+        'cursor-default': _ctx.loading,
+
+        // content
+        'flex items-center justify-center': _ctx.loading,
+        'flex-row-reverse': $props.icon && $props.iconRight
+      },
+
+    ]]),
+    "aria-busy": _ctx.loading ? 'true' : null,
+    "aria-disabled": $props.tag !== 'button' && _ctx.disabled ? 'true' : null,
+    disabled: _ctx.disabled || _ctx.loading,
+    type: $props.tag === 'button' ? $props.type : null
+  }, {
+    default: vue.withCtx(() => [
+      (_ctx.loading)
+        ? (vue.openBlock(), vue.createBlock(_component_x_spinner, {
+            key: 0,
+            size: _ctx.size,
+            class: "absolute"
+          }, null, 8, ["size"]))
+        : vue.createCommentVNode("", true),
+      ($props.icon)
+        ? (vue.openBlock(), vue.createElementBlock("span", {
+            key: 1,
+            class: vue.normalizeClass(["flex", [{
+        'mr-2': _ctx.$slots.default && !$props.iconRight,
+        'ml-2': _ctx.$slots.default && $props.iconRight,
+        'invisible': _ctx.loading
+      }]])
+          }, [
+            vue.createVNode(_component_x_icon, {
+              size: _ctx.size,
+              icon: $props.icon
+            }, null, 8, ["size", "icon"])
+          ], 2))
+        : vue.createCommentVNode("", true),
+      vue.createElementVNode("span", {
+        class: vue.normalizeClass({ 'invisible': _ctx.loading })
+      }, [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 2)
+    ]),
+    _: 3
+  }, 8, ["to", "class", "aria-busy", "aria-disabled", "disabled", "type"]))
+}
+
+exports.render = render;

package/lib/cjs/components/card/Card.vue.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var Card_vue_vue_type_script_lang = require('./Card.vue_vue&type=script&lang.js');
-var Card_vue_vue_type_template_id_5a1806fe_lang = require('./Card.vue_vue&type=template&id=5a1806fe&lang.js');
+var Card_vue_vue_type_script_lang = require('./Card.vue_vue_type_script_lang.js');
+var Card_vue_vue_type_template_id_6e221de0_lang = require('./Card.vue_vue_type_template_id_6e221de0_lang.js');
 
-Card_vue_vue_type_script_lang.render = Card_vue_vue_type_template_id_5a1806fe_lang.render;
+Card_vue_vue_type_script_lang.render = Card_vue_vue_type_template_id_6e221de0_lang.render;
 
 module.exports = Card_vue_vue_type_script_lang;

package/lib/cjs/components/card/{Card.vue_vue&type=template&id=5a1806fe&lang.js → Card.vue_vue_type_template_id_6e221de0_lang.js}

@@ -5,18 +5,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$props.tag), vue.mergeProps(_ctx.$attrs, {
-    class: ["rounded bg-white dark:bg-gray-800", [
+  return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.tag), {
+    class: vue.normalizeClass(["rounded bg-white dark:bg-gray-800", [
       {
-        'shadow': !_ctx.$props.flat,
+        'shadow': !$props.flat,
       },
-    ]]
-  }), {
+    ]])
+  }, {
     default: vue.withCtx(() => [
       vue.renderSlot(_ctx.$slots, "default")
     ]),
     _: 3
-  }, 16, ["class"]))
+  }, 8, ["class"]))
 }
 
 exports.render = render;

package/lib/cjs/components/checkbox/Checkbox.vue.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var Checkbox_vue_vue_type_script_lang = require('./Checkbox.vue_vue&type=script&lang.js');
-var Checkbox_vue_vue_type_template_id_bf794940_lang = require('./Checkbox.vue_vue&type=template&id=bf794940&lang.js');
+var Checkbox_vue_vue_type_script_lang = require('./Checkbox.vue_vue_type_script_lang.js');
+var Checkbox_vue_vue_type_template_id_d00d1178_lang = require('./Checkbox.vue_vue_type_template_id_d00d1178_lang.js');
 
-Checkbox_vue_vue_type_script_lang.render = Checkbox_vue_vue_type_template_id_bf794940_lang.render;
+Checkbox_vue_vue_type_script_lang.render = Checkbox_vue_vue_type_template_id_d00d1178_lang.render;
 
 module.exports = Checkbox_vue_vue_type_script_lang;

package/lib/cjs/components/checkbox/Checkbox.vue_vue_type_script_lang.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var inputtable = require('../../composables/inputtable.js');
+require('../spinner/Spinner.vue.js');
+var Spinner_vue_vue_type_script_lang = require('../spinner/Spinner.vue_vue_type_script_lang.js');
+
+var script = {
+  name: 'XCheckbox',
+  components: {
+    XSpinner: Spinner_vue_vue_type_script_lang,
+  },
+
+  validator: {
+    ...inputtable.withValidator(),
+  },
+
+  props: {
+    ...inputtable.withProps(),
+
+    label: {
+      type: String,
+      default: null,
+    },
+
+    glow: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: inputtable.withEmits(false),
+
+  setup(props, { attrs, emit }) {
+    return {
+      ...inputtable.useInputtable(props, { attrs, emit, useListeners: false }),
+    }
+  },
+
+  computed: {
+    checked: {
+      get() {
+        return this.modelValue
+      },
+
+      set(val) {
+        this.$emit('update:modelValue', val);
+      },
+    },
+  },
+
+  methods: {
+    toggle() {
+      this.$emit('update:modelValue', !this.modelValue);
+    },
+  },
+};
+
+module.exports = script;

package/lib/cjs/components/checkbox/Checkbox.vue_vue_type_template_id_d00d1178_lang.js

@@ -0,0 +1,102 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+const _hoisted_1 = { class: "inline-block mb-1 relative cursor-pointer pb-2" };
+const _hoisted_2 = ["aria-checked", "aria-disabled", "disabled", "name", "required", "value"];
+const _hoisted_3 = /*#__PURE__*/vue.createElementVNode("path", { d: "M0 11l2-2 5 5L18 3l2 2L7 18z" }, null, -1);
+const _hoisted_4 = [
+  _hoisted_3
+];
+const _hoisted_5 = ["textContent"];
+const _hoisted_6 = ["textContent"];
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_x_spinner = vue.resolveComponent("x-spinner");
+
+  return (vue.openBlock(), vue.createElementBlock("label", _hoisted_1, [
+    vue.createElementVNode("div", {
+      ref: "focusRef",
+      class: vue.normalizeClass(["flex items-center", { 'cursor-not-allowed': _ctx.disabled }]),
+      tabindex: 0,
+      onKeypress: _cache[1] || (_cache[1] = vue.withKeys(vue.withModifiers((...args) => ($options.toggle && $options.toggle(...args)), ["prevent","stop"]), ["enter","space"]))
+    }, [
+      vue.withDirectives(vue.createElementVNode("input", {
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($options.checked) = $event)),
+        "aria-checked": $options.checked ? 'true' : 'false',
+        "aria-disabled": _ctx.disabled ? 'true' : null,
+        type: "checkbox",
+        class: "invisible absolute",
+        disabled: _ctx.disabled || _ctx.loading,
+        name: _ctx.name,
+        required: _ctx.required,
+        value: _ctx.modelValue
+      }, null, 8, _hoisted_2), [
+        [vue.vModelCheckbox, $options.checked]
+      ]),
+      vue.createElementVNode("div", {
+        class: vue.normalizeClass(["rounded flex justify-center items-center flex-shrink-0", [
+          {
+            'shadow': !_ctx.flat && !_ctx.loading,
+            [`shadow-lg shadow-${_ctx.color}-500/50`]: !_ctx.flat && $props.glow && _ctx.modelValue,
+
+            'h-4 w-4': _ctx.size === 'sm' || _ctx.size === 'xs',
+            'h-5 w-5': !['xs', 'sm', 'xl'].includes(_ctx.size),
+            'h-6 w-6': _ctx.size === 'xl',
+          },
+          _ctx.disabled ? {
+            'bg-gray-500 border-gray-600 dark:border-gray-400': _ctx.modelValue,
+            'bg-gray-200 border-gray-300 dark:border-gray-700': !_ctx.modelValue,
+          } :
+          {
+            [`bg-${_ctx.color}-500 border-${_ctx.color}-500`]: _ctx.modelValue && !_ctx.loading,
+            'border bg-white dark:bg-gray-900 border-gray-300 hover:border-gray-900 dark:border-gray-700': !_ctx.modelValue && !_ctx.loading,
+          }
+        ]])
+      }, [
+        (_ctx.loading)
+          ? (vue.openBlock(), vue.createBlock(_component_x_spinner, {
+              key: 0,
+              size: _ctx.size,
+              class: "absolute"
+            }, null, 8, ["size"]))
+          : (vue.openBlock(), vue.createElementBlock("svg", {
+              key: 1,
+              class: vue.normalizeClass(["fill-current text-gray-100", {
+            'opacity-0': !_ctx.modelValue,
+            'h-2 w-2': _ctx.size === 'sm' || _ctx.size === 'xs',
+            'h-3 w-3': !['xs', 'sm', 'xl'].includes(_ctx.size),
+            'h-4 w-4': _ctx.size === 'xl',
+          }]),
+              viewBox: "0 0 20 20"
+            }, _hoisted_4, 2))
+      ], 2),
+      vue.createElementVNode("div", {
+        class: vue.normalizeClass(["inline-block font-medium text-gray-800 dark:text-gray-200 pl-2", {
+          'text-xs': _ctx.size === 'xs',
+          'text-sm': _ctx.size === 'sm',
+          'text-lg': _ctx.size === 'lg',
+          'text-xl': _ctx.size === 'xl',
+        }])
+      }, [
+        ($props.label)
+          ? (vue.openBlock(), vue.createElementBlock("span", {
+              key: 0,
+              textContent: vue.toDisplayString($props.label)
+            }, null, 8, _hoisted_5))
+          : vue.renderSlot(_ctx.$slots, "default", { key: 1 })
+      ], 2)
+    ], 34),
+    (_ctx.errorInternal)
+      ? (vue.openBlock(), vue.createElementBlock("p", {
+          key: 0,
+          class: "text-sm text-error-500 mt-1",
+          textContent: vue.toDisplayString(_ctx.errorInternal)
+        }, null, 8, _hoisted_6))
+      : vue.createCommentVNode("", true)
+  ]))
+}
+
+exports.render = render;

package/lib/cjs/components/collapse/Collapse.vue.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var Collapse_vue_vue_type_script_lang = require('./Collapse.vue_vue&type=script&lang.js');
-var Collapse_vue_vue_type_template_id_65032827_lang = require('./Collapse.vue_vue&type=template&id=65032827&lang.js');
+var Collapse_vue_vue_type_script_lang = require('./Collapse.vue_vue_type_script_lang.js');
+var Collapse_vue_vue_type_template_id_65032827_lang = require('./Collapse.vue_vue_type_template_id_65032827_lang.js');
 
 Collapse_vue_vue_type_script_lang.render = Collapse_vue_vue_type_template_id_65032827_lang.render;
 

package/lib/cjs/components/container/Container.vue.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var Container_vue_vue_type_script_lang = require('./Container.vue_vue&type=script&lang.js');
-var Container_vue_vue_type_template_id_7b2991c1_lang = require('./Container.vue_vue&type=template&id=7b2991c1&lang.js');
+var Container_vue_vue_type_script_lang = require('./Container.vue_vue_type_script_lang.js');
+var Container_vue_vue_type_template_id_1109578e_lang = require('./Container.vue_vue_type_template_id_1109578e_lang.js');
 
-Container_vue_vue_type_script_lang.render = Container_vue_vue_type_template_id_7b2991c1_lang.render;
+Container_vue_vue_type_script_lang.render = Container_vue_vue_type_template_id_1109578e_lang.render;
 
 module.exports = Container_vue_vue_type_script_lang;

package/lib/cjs/components/container/{Container.vue_vue&type=template&id=7b2991c1&lang.js → Container.vue_vue_type_template_id_1109578e_lang.js}

@@ -5,12 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$props.tag), vue.mergeProps(_ctx.$attrs, { class: "container mx-auto px-4" }), {
+  return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.tag), { class: "container mx-auto px-4" }, {
     default: vue.withCtx(() => [
       vue.renderSlot(_ctx.$slots, "default")
     ]),
     _: 3
-  }, 16))
+  }))
 }
 
 exports.render = render;

package/lib/cjs/components/divider/Divider.vue.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var Divider_vue_vue_type_script_lang = require('./Divider.vue_vue&type=script&lang.js');
-var Divider_vue_vue_type_template_id_61c5e3d4_lang = require('./Divider.vue_vue&type=template&id=61c5e3d4&lang.js');
+var Divider_vue_vue_type_script_lang = require('./Divider.vue_vue_type_script_lang.js');
+var Divider_vue_vue_type_template_id_041f3bf1_lang = require('./Divider.vue_vue_type_template_id_041f3bf1_lang.js');
 
-Divider_vue_vue_type_script_lang.render = Divider_vue_vue_type_template_id_61c5e3d4_lang.render;
+Divider_vue_vue_type_script_lang.render = Divider_vue_vue_type_template_id_041f3bf1_lang.render;
 
 module.exports = Divider_vue_vue_type_script_lang;

package/lib/cjs/components/divider/{Divider.vue_vue&type=template&id=61c5e3d4&lang.js → Divider.vue_vue_type_template_id_041f3bf1_lang.js}

@@ -7,43 +7,43 @@ var vue = require('vue');
 const _hoisted_1 = ["textContent"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps(_ctx.$attrs, {
-    class: [[
+  return (vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass([[
       {
-        'h-full flex-col': _ctx.$props.vertical,
-        'w-full': !_ctx.$props.vertical
+        'h-full flex-col': $props.vertical,
+        'w-full': !$props.vertical
       },
-    ], "flex justify-center items-center"]
-  }), [
+    ], "flex justify-center items-center"])
+  }, [
     vue.createElementVNode("div", {
       class: "bg-gray-200 dark:bg-gray-600 flex-grow",
       style: vue.normalizeStyle([
         {
-          width: _ctx.$props.vertical ? '1px' : 'auto',
-          height: !_ctx.$props.vertical ? '1px' : 'auto'
+          width: $props.vertical ? '1px' : 'auto',
+          height: !$props.vertical ? '1px' : 'auto'
         }
       ])
     }, null, 4),
-    (_ctx.$props.label)
+    ($props.label)
       ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
           class: vue.normalizeClass(["font-medium text-sm text-gray-600 dark:text-gray-300", [{
-        'my-2': _ctx.$props.vertical,
-        'mx-4': !_ctx.$props.vertical
+        'my-2': $props.vertical,
+        'mx-4': !$props.vertical
       }]]),
-          textContent: vue.toDisplayString(_ctx.$props.label)
+          textContent: vue.toDisplayString($props.label)
         }, null, 10, _hoisted_1))
       : vue.createCommentVNode("", true),
     vue.createElementVNode("div", {
       class: "bg-gray-200 dark:bg-gray-600 flex-grow",
       style: vue.normalizeStyle([
         {
-          width: _ctx.$props.vertical ? '1px' : 'auto',
-          height: !_ctx.$props.vertical ? '1px' : 'auto'
+          width: $props.vertical ? '1px' : 'auto',
+          height: !$props.vertical ? '1px' : 'auto'
         }
       ])
     }, null, 4)
-  ], 16))
+  ], 2))
 }
 
 exports.render = render;

package/lib/cjs/components/form/Form.vue.js

@@ -1,8 +1,7 @@
 'use strict';
 
-var Form_vue_vue_type_script_lang = require('./Form.vue_vue&type=script&lang.js');
-var Form_vue_vue_type_template_id_341983a2_lang = require('./Form.vue_vue&type=template&id=341983a2&lang.js');
+var Form_vue_vue_type_script_lang = require('./Form.vue_vue_type_script_lang.js');
+
 
-Form_vue_vue_type_script_lang.render = Form_vue_vue_type_template_id_341983a2_lang.render;
 
 module.exports = Form_vue_vue_type_script_lang;

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

@@ -0,0 +1,109 @@
+'use strict';
+
+var vue = require('vue');
+
+var script = vue.defineComponent({
+  name: 'XForm',
+  inheritAttrs: false,
+  props: {
+    autoValidate: {
+      type: Boolean,
+      default: true,
+    },
+    autoFocus: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    errors: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      inputs: [],
+    }
+  },
+  watch: {
+    errors(errors) {
+      this.$nextTick(() => {
+        errors.forEach((error) => {
+          const input = this.inputs.find((i) => i.name === error.field);
+
+          if (input) input.setErrorInternal(error.msg);
+        });
+      });
+    },
+  },
+  mounted() {
+    this.getInputs(this.vnodesInDefaultSlot);
+
+    if (this.autoFocus) {
+      if (this.inputs && this.inputs.length > 0) this.inputs[0].focus();
+    }
+  },
+  methods: {
+    submit(e) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const isFormValid = this.autoValidate ? this.validate() : true;
+
+      this.$emit('submit', isFormValid);
+    },
+    validate() {
+      let isFormValid = true;
+
+      this.inputs.forEach((input) => {
+        const isInputValid = input.validate();
+
+        if (!isInputValid && isFormValid) {
+          isFormValid = false;
+
+          // focus on input error
+          if (input.focus) input.focus();
+        }
+      });
+
+      return isFormValid
+    },
+    getInputs(vnodesInDefaultSlot) {
+      if (!Array.isArray(vnodesInDefaultSlot)) return
+
+      vnodesInDefaultSlot.forEach((vNode) => {
+        const vInstance = vNode.component?.ctx;
+
+        if (vInstance && typeof vInstance.validate === 'function') this.inputs.push(vInstance);
+        else if (vNode.children) this.getInputs(vNode.children);
+      });
+    },
+  },
+  render() {
+    const vnodesInDefaultSlot = this.$slots.default ? this.$slots.default() : [];
+
+    this.vnodesInDefaultSlot = vnodesInDefaultSlot;
+
+    return vue.h(
+      'form',
+      {
+        onKeyUp: (event) => {
+          if (event.target !== event.currentTarget) return
+          if (event.key === 'Enter') this.submit(event);
+        },
+        onSubmit: this.submit,
+      },
+      [
+        vue.h('fieldset', {
+          disabled: this.disabled,
+        },
+        vnodesInDefaultSlot),
+      ],
+    )
+  },
+});
+
+module.exports = script;

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var Icon_vue_vue_type_script_lang = require('./Icon.vue_vue&type=script&lang.js');
-var Icon_vue_vue_type_template_id_2e35bbff_lang = require('./Icon.vue_vue&type=template&id=2e35bbff&lang.js');
+var Icon_vue_vue_type_script_lang = require('./Icon.vue_vue_type_script_lang.js');
+var Icon_vue_vue_type_template_id_4fe868d3_lang = require('./Icon.vue_vue_type_template_id_4fe868d3_lang.js');
 
-Icon_vue_vue_type_script_lang.render = Icon_vue_vue_type_template_id_2e35bbff_lang.render;
+Icon_vue_vue_type_script_lang.render = Icon_vue_vue_type_template_id_4fe868d3_lang.render;
 
 module.exports = Icon_vue_vue_type_script_lang;

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

@@ -1,18 +1,19 @@
 'use strict';
 
+var common = require('../../composables/common.js');
+
 var script = {
   name: 'XIcon',
 
+  validator: common.withValidator(),
+
   props: {
+    ...common.withProps(),
+
     icon: {
       type: String,
       required: true,
     },
-
-    size: {
-      type: String,
-      default: null,
-    },
   },
 
   computed: {

package/lib/cjs/components/icon/{Icon.vue_vue&type=template&id=2e35bbff&lang.js → Icon.vue_vue_type_template_id_4fe868d3_lang.js}

@@ -7,26 +7,26 @@ var vue = require('vue');
 const _hoisted_1 = ["innerHTML"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("svg", vue.mergeProps({ class: "stroke-2 inline-block" }, _ctx.$attrs, {
-    class: [
+  return (vue.openBlock(), vue.createElementBlock("svg", {
+    class: vue.normalizeClass(["stroke-2 inline-block", [
       {
-        'h-3 w-3': _ctx.$props.size === 'xs',
-        'h-4 w-4': _ctx.$props.size === 'sm',
-        'h-5 w-5': !['xs', 'sm', 'xl'].includes(_ctx.$props.size),
-        'h-6 w-6': _ctx.$props.size === 'xl',
+        '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"
-  }), [
+  }, [
     vue.createElementVNode("g", {
-      innerHTML: $options.icons[_ctx.$props.icon] ? $options.icons[_ctx.$props.icon] : _ctx.$props.icon
+      innerHTML: $options.icons[$props.icon] ? $options.icons[$props.icon] : $props.icon
     }, null, 8, _hoisted_1)
-  ], 16))
+  ], 2))
 }
 
 exports.render = render;

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

@@ -0,0 +1,8 @@
+'use strict';
+
+var Image_vue_vue_type_script_lang = require('./Image.vue_vue_type_script_lang.js');
+var Image_vue_vue_type_template_id_d7718e2c_lang = require('./Image.vue_vue_type_template_id_d7718e2c_lang.js');
+
+Image_vue_vue_type_script_lang.render = Image_vue_vue_type_template_id_d7718e2c_lang.render;
+
+module.exports = Image_vue_vue_type_script_lang;