@indielayer/ui 0.1.0 → 0.2.2

package/lib/cjs/composables/inputtable.js

@@ -0,0 +1,162 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var interactive = require('./interactive.js');
+
+const validator = {
+  ...interactive.withValidator(),
+};
+
+const withProps = () => ({
+  ...interactive.withProps(),
+  name: {
+    type: String,
+    default: null,
+  },
+  modelValue: {
+    type: [String, Number, Boolean, Function, Object, Array],
+    default: null,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  validateOnInput: {
+    type: Boolean,
+    default: true,
+  },
+  error: {
+    type: String,
+    default: '',
+  },
+  rules: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const withValidator = () => validator;
+
+const withEmits = (useListeners = true) => {
+  const emits = ['update:modelValue'];
+
+  if (!useListeners) return emits
+
+  return emits.concat(['blur', 'focus', 'input', 'change'])
+};
+
+const useInputtable = (props, { attrs, emit, useListeners = true } = {}) => {
+  const interactive$1 = interactive.useInteractive();
+
+  const isFirstValidation = vue.ref(true);
+  const errorInternal = vue.ref(props.error);
+
+  const name = props.name ? props.name : (Math.random() + 1).toString(36).substring(7);
+  const nameInternal = vue.ref(name);
+
+  vue.watch(() => props.error, (val) => { errorInternal.value = val; });
+  vue.watch(() => props.name, (val) => { if (val) nameInternal.value = val; });
+
+  const form = vue.inject('form', {
+    registerInput: () => {},
+    unregisterInput: () => {},
+  });
+
+  const reset = () => {
+    errorInternal.value = '';
+    isFirstValidation.value = true;
+    emit('update:modelValue', '');
+  };
+
+  const setError = (val) => {
+    errorInternal.value = val;
+  };
+
+  const validate = (val) => {
+    val = val || props.modelValue;
+
+    isFirstValidation.value = false;
+
+    for (let i = 0; i < props.rules.length; i++) {
+      const item = props.rules[i];
+
+      let isValid = true;
+
+      // Direct Function
+      if (typeof item === 'function') {
+        const rule = item;
+
+        isValid = rule(val);
+      } else if (Array.isArray(item) && item.length === 2) {
+        // Rule array [function, options]
+        const { 0: rule, 1: options } = item;
+
+        isValid = rule(val, options);
+      } else {
+        // Rule object { fn, options }
+        const rule = item.fn;
+        const { options } = item;
+
+        isValid = rule(val, options);
+      }
+
+      if (isValid !== true) {
+        errorInternal.value = isValid;
+
+        return false
+      }
+    }
+
+    errorInternal.value = '';
+
+    return true
+  };
+
+  const inputListeners = useListeners ? vue.computed(() => {
+    return {
+      attrs,
+      blur: (event) => emit('blur', event),
+      focus: (event) => emit('focus', event),
+      input: (event) => {
+        if (props.validateOnInput && !isFirstValidation.value) validate(event.target.value);
+        emit('update:modelValue', event.target.value);
+      },
+      change: (event) => emit('change', event),
+    }
+  }) : vue.ref({});
+
+  vue.onMounted(() => {
+    form.registerInput(nameInternal.value, { focus: interactive$1.focus, validate, setError });
+  });
+
+  vue.onUnmounted(() => {
+    form.unregisterInput(nameInternal.value);
+  });
+
+  return {
+    ...interactive$1,
+
+    // data
+    isFirstValidation,
+    errorInternal,
+
+    // computed
+    inputListeners,
+
+    // methods
+    reset,
+    validate,
+    setError,
+  }
+};
+
+exports.useInputtable = useInputtable;
+exports.withEmits = withEmits;
+exports.withProps = withProps;
+exports.withValidator = withValidator;

package/lib/cjs/composables/interactive.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var common = require('./common.js');
+
+const validator = {
+  ...common.withValidator(),
+};
+
+const withProps = () => ({
+  ...common.withProps(),
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const withValidator = () => validator;
+
+const useInteractive = () => {
+  const focusRef = vue.ref(null);
+
+  const focus = () => {
+    if (focusRef.value) focusRef.value.focus();
+  };
+
+  return {
+    focusRef,
+    focus,
+  }
+};
+
+exports.useInteractive = useInteractive;
+exports.withProps = withProps;
+exports.withValidator = withValidator;

package/lib/cjs/{src/index.js → index.js}

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

package/lib/esm/components/avatar/Avatar.vue.js

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

package/lib/esm/components/avatar/Avatar.vue_vue_type_script_lang.js

@@ -0,0 +1,84 @@
+const validator = {
+  variant: [
+    'rounded',
+    'squared',
+  ],
+};
+
+var script = {
+  name: 'XAvatar',
+
+  validator,
+
+  props: {
+    alt: {
+      type: String,
+      default: null,
+    },
+
+    color: {
+      type: String,
+      default: 'primary',
+    },
+
+    name: {
+      type: String,
+      default: null,
+    },
+
+    size: {
+      type: String,
+      default: null,
+    },
+
+    outlined: {
+      type: Boolean,
+      default: false,
+    },
+
+    src: {
+      type: String,
+      default: null,
+    },
+
+    tag: {
+      type: String,
+      default: 'span',
+    },
+
+    squared: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      source: null,
+    }
+  },
+
+  computed: {
+    initials() {
+      if (this.name) {
+        const initials = this.name.match(/\b\w/g) || [];
+
+        return ((initials.shift() || '') + (initials.pop() || '')).toUpperCase()
+      }
+
+      return ''
+    },
+  },
+
+  mounted() {
+    if (this.src) {
+      const img = new Image();
+
+      img.onload = () => { this.source = this.src; };
+      img.onerror = () => { };
+      img.src = this.src;
+    }
+  },
+};
+
+export { script as default };

package/lib/esm/components/avatar/Avatar.vue_vue_type_template_id_d5090cb0_lang.js

@@ -0,0 +1,46 @@
+import { openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, toDisplayString, createCommentVNode } from 'vue';
+
+const _hoisted_1 = {
+  key: 0,
+  class: "leading-none"
+};
+const _hoisted_2 = ["alt", "src"];
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createBlock(resolveDynamicComponent($props.tag), {
+    class: normalizeClass(["inline-flex items-center justify-center overflow-hidden", [
+      // color
+      { [`bg-${$props.color}-500 text-${$props.color}-50`]: !$data.source && !$props.outlined },
+      {
+        // border
+        'border border-gray-400 dark:border-gray-500': !$data.source && $props.outlined,
+
+        // size
+        'h-6 w-6 text-xs': $props.size === 'xs',
+        'h-7 w-7 text-sm': $props.size === 'sm',
+        'h-10 w-10': !['xs', 'sm', 'lg', 'xl'].includes($props.size),
+        'h-12 w-12 text-lg': $props.size === 'lg',
+        'h-20 w-20 text-2xl': $props.size === 'xl',
+        'h-36 w-36 text-2xl': $props.size === '2xl',
+      },
+      $props.squared ? 'rounded-md' : 'rounded-full'
+    ]])
+  }, {
+    default: withCtx(() => [
+      (!$data.source && $props.name)
+        ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString($options.initials), 1))
+        : createCommentVNode("", true),
+      ($data.source)
+        ? (openBlock(), createElementBlock("img", {
+            key: 1,
+            alt: $props.alt,
+            src: $props.src,
+            class: "h-full w-full"
+          }, null, 8, _hoisted_2))
+        : createCommentVNode("", true)
+    ]),
+    _: 1
+  }, 8, ["class"]))
+}
+
+export { render };

package/lib/esm/components/button/Button.vue.js

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

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

@@ -1,25 +1,11 @@
+import { withValidator, withProps, useInteractive } from '../../composables/interactive.js';
 import '../spinner/Spinner.vue.js';
 import '../icon/Icon.vue.js';
-import script$1 from '../spinner/Spinner.vue_vue&type=script&lang.js';
-import script$2 from '../icon/Icon.vue_vue&type=script&lang.js';
+import script$1 from '../spinner/Spinner.vue_vue_type_script_lang.js';
+import script$2 from '../icon/Icon.vue_vue_type_script_lang.js';
 
 const validator = {
-  group: [
-    false,
-    true,
-    '',
-    'first',
-    'last',
-  ],
-  color: [
-    'primary',
-    'secondary',
-    'success',
-    'error',
-    'warning',
-    'gray',
-    'none',
-  ],
+  group: [false, true, '', 'first', 'last'],
 };
 
 var script = {
@@ -29,13 +15,13 @@ var script = {
     XIcon: script$2,
   },
 
-  validator,
+  validator: {
+    ...withValidator(),
+    ...validator,
+  },
 
   props: {
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
+    ...withProps(),
 
     group: {
       default: false,
@@ -53,21 +39,11 @@ var script = {
       default: false,
     },
 
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-
     to: {
       type: String,
       default: undefined,
     },
 
-    size: {
-      type: String,
-      default: null,
-    },
-
     tag: {
       type: String,
       default: 'button',
@@ -88,16 +64,16 @@ var script = {
       default: false,
     },
 
-    flat: {
+    glow: {
       type: Boolean,
       default: false,
     },
+  },
 
-    color: {
-      type: String,
-      default: 'primary',
-      validator: (value) => validator.color.includes(value),
-    },
+  setup() {
+    return {
+      ...useInteractive(),
+    }
   },
 };
 

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

@@ -0,0 +1,96 @@
+import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createCommentVNode, createElementBlock, createVNode, createElementVNode, renderSlot } from 'vue';
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_x_spinner = resolveComponent("x-spinner");
+  const _component_x_icon = resolveComponent("x-icon");
+
+  return (openBlock(), createBlock(resolveDynamicComponent($props.to ? 'router-link' : $props.tag), {
+    ref: "focusRef",
+    to: $props.to,
+    class: 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: withCtx(() => [
+      (_ctx.loading)
+        ? (openBlock(), createBlock(_component_x_spinner, {
+            key: 0,
+            size: _ctx.size,
+            class: "absolute"
+          }, null, 8, ["size"]))
+        : createCommentVNode("", true),
+      ($props.icon)
+        ? (openBlock(), createElementBlock("span", {
+            key: 1,
+            class: normalizeClass(["flex", [{
+        'mr-2': _ctx.$slots.default && !$props.iconRight,
+        'ml-2': _ctx.$slots.default && $props.iconRight,
+        'invisible': _ctx.loading
+      }]])
+          }, [
+            createVNode(_component_x_icon, {
+              size: _ctx.size,
+              icon: $props.icon
+            }, null, 8, ["size", "icon"])
+          ], 2))
+        : createCommentVNode("", true),
+      createElementVNode("span", {
+        class: normalizeClass({ 'invisible': _ctx.loading })
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 2)
+    ]),
+    _: 3
+  }, 8, ["to", "class", "aria-busy", "aria-disabled", "disabled", "type"]))
+}
+
+export { render };

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

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