ablok-components 0.0.7 → 0.0.10

package/dist/ablok-components.es.js

@@ -1,6 +1,6 @@
-import { defineComponent, resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, createElementVNode, renderSlot } from "vue";
+import { defineComponent, resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, createElementVNode, renderSlot, computed, createBlock, createCommentVNode, unref, toDisplayString, withDirectives, isRef, vModelDynamic, createTextVNode, ref, watch, onBeforeMount, Fragment, renderList, getCurrentInstance, inject, markRaw, reactive, effectScope, isReactive, toRaw, onUnmounted, nextTick, toRefs, getCurrentScope, onScopeDispose, shallowRef, withModifiers } from "vue";
 var baseIcon_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".base-icon{display:inline-block}.base-icon svg{display:block;stroke-width:0;stroke:currentColor;fill:currentColor;width:1.5em;height:1.5em}.base-icon--xxl svg{width:12rem;height:12rem}.base-icon--xl svg{width:8rem;height:8rem}.base-icon--large svg{width:4rem;height:4rem}\n")();
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "base-icon",
   props: {
     id: {
@@ -29,9 +29,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 var loadingSpinner_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".loading-spinner{min-width:2rem}\n")();
-const _hoisted_1$1 = { class: "loading-spinner d-block" };
-const _hoisted_2$1 = { class: "loading-spinner__animation" };
-const _hoisted_3 = {
+const _hoisted_1$5 = { class: "loading-spinner d-block" };
+const _hoisted_2$4 = { class: "loading-spinner__animation" };
+const _hoisted_3$1 = {
   class: "d-block",
   version: "1.1",
   id: "L9",
@@ -56,7 +56,7 @@ const _hoisted_5 = /* @__PURE__ */ createElementVNode("animateTransform", {
 const _hoisted_6 = [
   _hoisted_5
 ];
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "loading-spinner",
   props: {
     color: {
@@ -66,9 +66,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", _hoisted_1$1, [
-        createElementVNode("span", _hoisted_2$1, [
-          (openBlock(), createElementBlock("svg", _hoisted_3, [
+      return openBlock(), createElementBlock("span", _hoisted_1$5, [
+        createElementVNode("span", _hoisted_2$4, [
+          (openBlock(), createElementBlock("svg", _hoisted_3$1, [
             createElementVNode("path", {
               fill: __props.color,
               d: "M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
@@ -80,30 +80,947 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var baseButton_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".btn{appearance:none;background:none;border:none}\n")();
-const _hoisted_1 = { class: "btn" };
-const _hoisted_2 = ["innerHTML"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
+var baseButton_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".base-button{display:flex;justify-content:center;align-items:center;box-sizing:border-box;transition:all .2s ease;text-decoration:none;width:100%;margin:0;padding:1.036em 1.625em;appearance:none;outline:none;border:none;border-radius:.4375em;font-size:.875em;line-height:1.125em;text-transform:uppercase;font-weight:700}@media screen and (min-width: 600px){.base-button{width:auto}}.base-button .icon{width:16px;height:16px;margin-top:-1px}.base-button.s-collapsed>.caption{display:none}.base-button.s-pending{background-repeat:no-repeat;background-position:center center}.base-button.s-pending .caption{margin-left:25px;visibility:hidden}@media screen and (min-width: 600px){.base-button.s-pending{background-position:1.625em center}.base-button.s-pending .caption{visibility:visible}}.base-button[readonly],.base-button[disabled]{cursor:not-allowed}\n")();
+const _hoisted_1$4 = ["type", "disabled", "href", "to"];
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "base-button",
   props: {
-    caption: {
+    type: null,
+    caption: null,
+    variant: null,
+    size: null,
+    icon: null,
+    href: null,
+    to: null,
+    disabled: { type: Boolean },
+    pending: { type: Boolean },
+    outlined: { type: Boolean },
+    rounded: { type: Boolean },
+    fab: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const showCaption = computed(() => {
+      return props.caption && !props.fab;
+    });
+    return (_ctx, _cache) => {
+      const _component_base_icon = resolveComponent("base-icon");
+      return openBlock(), createElementBlock("button", {
+        type: __props.type,
+        disabled: __props.disabled,
+        href: __props.href,
+        to: __props.to,
+        class: normalizeClass(["base-button", {
+          disabled: __props.disabled,
+          pending: __props.pending,
+          rounded: __props.rounded,
+          outlined: __props.outlined,
+          fab: __props.fab,
+          "x-large": __props.size === "x-large",
+          "large": __props.size === "large",
+          "small": __props.size === "small",
+          "x-small": __props.size === "x-small"
+        }])
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          __props.icon ? (openBlock(), createBlock(_component_base_icon, {
+            key: 0,
+            id: __props.icon,
+            class: "base-button__caption"
+          }, null, 8, ["id"])) : createCommentVNode("", true),
+          unref(showCaption) ? (openBlock(), createElementBlock("span", {
+            key: 1,
+            class: normalizeClass(["base-button__caption", { "icon-padding": __props.icon }])
+          }, toDisplayString(__props.caption), 3)) : createCommentVNode("", true)
+        ])
+      ], 10, _hoisted_1$4);
+    };
+  }
+});
+function uniqueId() {
+  return (new Date().valueOf() + Math.random()).toString(36);
+}
+const _hoisted_1$3 = { class: "base-input" };
+const _hoisted_2$3 = ["type", "name", "id", "label", "placeholder", "pattern", "disabled", "read-only", "required", "maxlength", "checked"];
+const _hoisted_3 = ["for"];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "base-input",
+  props: {
+    modelValue: {
+      type: [String, Number, Boolean],
+      default: ""
+    },
+    type: {
       type: String,
-      default: "Base Button"
+      default: "text"
     },
-    size: {
+    name: {
       type: String,
-      default: "default"
+      default: () => uniqueId()
+    },
+    id: {
+      type: String,
+      default: () => uniqueId()
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    variant: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    maxlength: {
+      type: Number
+    },
+    pattern: {
+      type: String,
+      default: null
+    },
+    checked: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const model = computed({
+      get() {
+        return props.modelValue;
+      },
+      set(update) {
+        emit("update:modelValue", update);
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
+        withDirectives(createElementVNode("input", {
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(model) ? model.value = $event : null),
+          type: __props.type,
+          name: __props.name,
+          id: __props.id,
+          label: `${__props.label}${__props.required ? " *" : ""}`,
+          placeholder: __props.placeholder,
+          pattern: __props.pattern,
+          disabled: __props.disabled,
+          "read-only": __props.readOnly,
+          required: __props.required,
+          maxlength: __props.maxlength,
+          checked: __props.checked
+        }, null, 8, _hoisted_2$3), [
+          [vModelDynamic, unref(model)]
+        ]),
+        createElementVNode("label", { for: __props.id }, [
+          renderSlot(_ctx.$slots, "label", {}, () => [
+            createTextVNode(toDisplayString(__props.label), 1)
+          ])
+        ], 8, _hoisted_3)
+      ]);
+    };
+  }
+});
+const _hoisted_1$2 = { class: "radio-group" };
+const _hoisted_2$2 = ["for"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "check-group",
+  props: {
+    modelValue: {
+      default: []
+    },
+    options: {
+      type: Array,
+      default: []
+    },
+    name: {
+      type: String,
+      default: () => uniqueId()
+    },
+    id: {
+      type: String,
+      default: () => uniqueId()
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    variant: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["change", "update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const values = ref([]);
+    watch(() => props.modelValue, (update, before) => {
+      values.value = props.options.map((option) => option.value ? props.modelValue.some((modelValue) => modelValue["value "] === option.value) : props.modelValue.some((modelValue) => modelValue === option));
+    }, { immediate: true });
+    watch(values, (update, before) => {
+      const options = update.reduce((mappedValues, option, index) => {
+        const value = option && props.options[index] ? [props.options[index] || props.options[index]] : [];
+        return [...mappedValues, ...value];
+      }, []);
+      emit("update:modelValue", options);
+    }, { deep: true });
+    onBeforeMount(() => {
+    });
+    return (_ctx, _cache) => {
+      const _component_base_input = resolveComponent("base-input");
+      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {
+          return openBlock(), createBlock(_component_base_input, {
+            key: index,
+            modelValue: unref(values)[index],
+            "onUpdate:modelValue": ($event) => unref(values)[index] = $event,
+            type: "checkbox",
+            name: __props.name,
+            id: `${__props.id}-${index}`,
+            label: `${option.text || option}${__props.required ? " *" : ""}`,
+            disabled: __props.disabled,
+            "read-only": __props.readOnly,
+            required: __props.required
+          }, null, 8, ["modelValue", "onUpdate:modelValue", "name", "id", "label", "disabled", "read-only", "required"]);
+        }), 128)),
+        createElementVNode("label", { for: __props.id }, [
+          renderSlot(_ctx.$slots, "label", {}, () => [
+            createTextVNode(toDisplayString(__props.label), 1)
+          ])
+        ], 8, _hoisted_2$2)
+      ]);
+    };
+  }
+});
+const _hoisted_1$1 = { class: "radio-group" };
+const _hoisted_2$1 = ["for"];
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "radio-group",
+  props: {
+    modelValue: {
+      default: false
+    },
+    options: {
+      type: Array,
+      default: []
+    },
+    name: {
+      type: String,
+      default: () => uniqueId()
+    },
+    id: {
+      type: String,
+      default: () => uniqueId()
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    variant: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["change", "update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    ref(props.options.map((option) => option.value === props.modelValue));
+    function change(value2) {
+      emit("update:modelValue", value2);
+    }
+    onBeforeMount(() => {
+    });
+    return (_ctx, _cache) => {
+      const _component_base_input = resolveComponent("base-input");
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {
+          return openBlock(), createBlock(_component_base_input, {
+            key: index,
+            type: "radio",
+            name: __props.name,
+            id: `${__props.id}-${index}`,
+            value: option.value || option,
+            label: `${option.text || option}${__props.required ? " *" : ""}`,
+            checked: option.value ? option.value === __props.modelValue : option === __props.modelValue,
+            disabled: __props.disabled,
+            "read-only": __props.readOnly,
+            required: __props.required,
+            onChange: ($event) => change(option)
+          }, null, 8, ["name", "id", "value", "label", "checked", "disabled", "read-only", "required", "onChange"]);
+        }), 128)),
+        createElementVNode("label", { for: __props.id }, [
+          renderSlot(_ctx.$slots, "label", {}, () => [
+            createTextVNode(toDisplayString(__props.label), 1)
+          ])
+        ], 8, _hoisted_2$1)
+      ]);
+    };
+  }
+});
+/*!
+  * pinia v2.0.14
+  * (c) 2022 Eduardo San Martin Morote
+  * @license MIT
+  */
+let activePinia;
+const setActivePinia = (pinia) => activePinia = pinia;
+const piniaSymbol = Symbol();
+function isPlainObject(o) {
+  return o && typeof o === "object" && Object.prototype.toString.call(o) === "[object Object]" && typeof o.toJSON !== "function";
+}
+var MutationType;
+(function(MutationType2) {
+  MutationType2["direct"] = "direct";
+  MutationType2["patchObject"] = "patch object";
+  MutationType2["patchFunction"] = "patch function";
+})(MutationType || (MutationType = {}));
+const noop$1 = () => {
+};
+function addSubscription(subscriptions, callback, detached, onCleanup = noop$1) {
+  subscriptions.push(callback);
+  const removeSubscription = () => {
+    const idx = subscriptions.indexOf(callback);
+    if (idx > -1) {
+      subscriptions.splice(idx, 1);
+      onCleanup();
+    }
+  };
+  if (!detached && getCurrentInstance()) {
+    onUnmounted(removeSubscription);
+  }
+  return removeSubscription;
+}
+function triggerSubscriptions(subscriptions, ...args) {
+  subscriptions.slice().forEach((callback) => {
+    callback(...args);
+  });
+}
+function mergeReactiveObjects(target, patchToApply) {
+  for (const key in patchToApply) {
+    if (!patchToApply.hasOwnProperty(key))
+      continue;
+    const subPatch = patchToApply[key];
+    const targetValue = target[key];
+    if (isPlainObject(targetValue) && isPlainObject(subPatch) && target.hasOwnProperty(key) && !isRef(subPatch) && !isReactive(subPatch)) {
+      target[key] = mergeReactiveObjects(targetValue, subPatch);
+    } else {
+      target[key] = subPatch;
+    }
+  }
+  return target;
+}
+const skipHydrateSymbol = Symbol();
+function shouldHydrate(obj) {
+  return !isPlainObject(obj) || !obj.hasOwnProperty(skipHydrateSymbol);
+}
+const { assign } = Object;
+function isComputed(o) {
+  return !!(isRef(o) && o.effect);
+}
+function createOptionsStore(id, options, pinia, hot) {
+  const { state, actions, getters } = options;
+  const initialState = pinia.state.value[id];
+  let store;
+  function setup() {
+    if (!initialState && true) {
+      {
+        pinia.state.value[id] = state ? state() : {};
+      }
+    }
+    const localState = toRefs(pinia.state.value[id]);
+    return assign(localState, actions, Object.keys(getters || {}).reduce((computedGetters, name) => {
+      computedGetters[name] = markRaw(computed(() => {
+        setActivePinia(pinia);
+        const store2 = pinia._s.get(id);
+        return getters[name].call(store2, store2);
+      }));
+      return computedGetters;
+    }, {}));
+  }
+  store = createSetupStore(id, setup, options, pinia, hot, true);
+  store.$reset = function $reset() {
+    const newState = state ? state() : {};
+    this.$patch(($state) => {
+      assign($state, newState);
+    });
+  };
+  return store;
+}
+function createSetupStore($id, setup, options = {}, pinia, hot, isOptionsStore) {
+  let scope;
+  const optionsForPlugin = assign({ actions: {} }, options);
+  const $subscribeOptions = {
+    deep: true
+  };
+  let isListening;
+  let isSyncListening;
+  let subscriptions = markRaw([]);
+  let actionSubscriptions = markRaw([]);
+  let debuggerEvents;
+  const initialState = pinia.state.value[$id];
+  if (!isOptionsStore && !initialState && true) {
+    {
+      pinia.state.value[$id] = {};
+    }
+  }
+  ref({});
+  let activeListener;
+  function $patch(partialStateOrMutator) {
+    let subscriptionMutation;
+    isListening = isSyncListening = false;
+    if (typeof partialStateOrMutator === "function") {
+      partialStateOrMutator(pinia.state.value[$id]);
+      subscriptionMutation = {
+        type: MutationType.patchFunction,
+        storeId: $id,
+        events: debuggerEvents
+      };
+    } else {
+      mergeReactiveObjects(pinia.state.value[$id], partialStateOrMutator);
+      subscriptionMutation = {
+        type: MutationType.patchObject,
+        payload: partialStateOrMutator,
+        storeId: $id,
+        events: debuggerEvents
+      };
+    }
+    const myListenerId = activeListener = Symbol();
+    nextTick().then(() => {
+      if (activeListener === myListenerId) {
+        isListening = true;
+      }
+    });
+    isSyncListening = true;
+    triggerSubscriptions(subscriptions, subscriptionMutation, pinia.state.value[$id]);
+  }
+  const $reset = noop$1;
+  function $dispose() {
+    scope.stop();
+    subscriptions = [];
+    actionSubscriptions = [];
+    pinia._s.delete($id);
+  }
+  function wrapAction(name, action) {
+    return function() {
+      setActivePinia(pinia);
+      const args = Array.from(arguments);
+      const afterCallbackList = [];
+      const onErrorCallbackList = [];
+      function after(callback) {
+        afterCallbackList.push(callback);
+      }
+      function onError(callback) {
+        onErrorCallbackList.push(callback);
+      }
+      triggerSubscriptions(actionSubscriptions, {
+        args,
+        name,
+        store,
+        after,
+        onError
+      });
+      let ret;
+      try {
+        ret = action.apply(this && this.$id === $id ? this : store, args);
+      } catch (error) {
+        triggerSubscriptions(onErrorCallbackList, error);
+        throw error;
+      }
+      if (ret instanceof Promise) {
+        return ret.then((value) => {
+          triggerSubscriptions(afterCallbackList, value);
+          return value;
+        }).catch((error) => {
+          triggerSubscriptions(onErrorCallbackList, error);
+          return Promise.reject(error);
+        });
+      }
+      triggerSubscriptions(afterCallbackList, ret);
+      return ret;
+    };
+  }
+  const partialStore = {
+    _p: pinia,
+    $id,
+    $onAction: addSubscription.bind(null, actionSubscriptions),
+    $patch,
+    $reset,
+    $subscribe(callback, options2 = {}) {
+      const removeSubscription = addSubscription(subscriptions, callback, options2.detached, () => stopWatcher());
+      const stopWatcher = scope.run(() => watch(() => pinia.state.value[$id], (state) => {
+        if (options2.flush === "sync" ? isSyncListening : isListening) {
+          callback({
+            storeId: $id,
+            type: MutationType.direct,
+            events: debuggerEvents
+          }, state);
+        }
+      }, assign({}, $subscribeOptions, options2)));
+      return removeSubscription;
+    },
+    $dispose
+  };
+  const store = reactive(assign({}, partialStore));
+  pinia._s.set($id, store);
+  const setupStore = pinia._e.run(() => {
+    scope = effectScope();
+    return scope.run(() => setup());
+  });
+  for (const key in setupStore) {
+    const prop = setupStore[key];
+    if (isRef(prop) && !isComputed(prop) || isReactive(prop)) {
+      if (!isOptionsStore) {
+        if (initialState && shouldHydrate(prop)) {
+          if (isRef(prop)) {
+            prop.value = initialState[key];
+          } else {
+            mergeReactiveObjects(prop, initialState[key]);
+          }
+        }
+        {
+          pinia.state.value[$id][key] = prop;
+        }
+      }
+    } else if (typeof prop === "function") {
+      const actionValue = wrapAction(key, prop);
+      {
+        setupStore[key] = actionValue;
+      }
+      optionsForPlugin.actions[key] = prop;
+    } else
+      ;
+  }
+  {
+    assign(store, setupStore);
+    assign(toRaw(store), setupStore);
+  }
+  Object.defineProperty(store, "$state", {
+    get: () => pinia.state.value[$id],
+    set: (state) => {
+      $patch(($state) => {
+        assign($state, state);
+      });
+    }
+  });
+  pinia._p.forEach((extender) => {
+    {
+      assign(store, scope.run(() => extender({
+        store,
+        app: pinia._a,
+        pinia,
+        options: optionsForPlugin
+      })));
+    }
+  });
+  if (initialState && isOptionsStore && options.hydrate) {
+    options.hydrate(store.$state, initialState);
+  }
+  isListening = true;
+  isSyncListening = true;
+  return store;
+}
+function defineStore(idOrOptions, setup, setupOptions) {
+  let id;
+  let options;
+  const isSetupStore = typeof setup === "function";
+  if (typeof idOrOptions === "string") {
+    id = idOrOptions;
+    options = isSetupStore ? setupOptions : setup;
+  } else {
+    options = idOrOptions;
+    id = idOrOptions.id;
+  }
+  function useStore(pinia, hot) {
+    const currentInstance = getCurrentInstance();
+    pinia = pinia || currentInstance && inject(piniaSymbol);
+    if (pinia)
+      setActivePinia(pinia);
+    pinia = activePinia;
+    if (!pinia._s.has(id)) {
+      if (isSetupStore) {
+        createSetupStore(id, setup, options, pinia);
+      } else {
+        createOptionsStore(id, options, pinia);
+      }
+    }
+    const store = pinia._s.get(id);
+    return store;
+  }
+  useStore.$id = id;
+  return useStore;
+}
+function tryOnScopeDispose(fn) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}
+var _a;
+const isClient = typeof window !== "undefined";
+const isString = (val) => typeof val === "string";
+const noop = () => {
+};
+isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
+function createFilterWrapper(filter, fn) {
+  function wrapper(...args) {
+    filter(() => fn.apply(this, args), { fn, thisArg: this, args });
+  }
+  return wrapper;
+}
+const bypassFilter = (invoke) => {
+  return invoke();
+};
+function pausableFilter(extendFilter = bypassFilter) {
+  const isActive = ref(true);
+  function pause() {
+    isActive.value = false;
+  }
+  function resume() {
+    isActive.value = true;
+  }
+  const eventFilter = (...args) => {
+    if (isActive.value)
+      extendFilter(...args);
+  };
+  return { isActive, pause, resume, eventFilter };
+}
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __objRest$5 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$5.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function watchWithFilter(source, cb, options = {}) {
+  const _a2 = options, {
+    eventFilter = bypassFilter
+  } = _a2, watchOptions = __objRest$5(_a2, [
+    "eventFilter"
+  ]);
+  return watch(source, createFilterWrapper(eventFilter, cb), watchOptions);
+}
+var __defProp$1 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+var __objRest$1 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
+        target[prop] = source[prop];
     }
+  return target;
+};
+function watchPausable(source, cb, options = {}) {
+  const _a2 = options, {
+    eventFilter: filter
+  } = _a2, watchOptions = __objRest$1(_a2, [
+    "eventFilter"
+  ]);
+  const { eventFilter, pause, resume, isActive } = pausableFilter(filter);
+  const stop = watchWithFilter(source, cb, __spreadProps$1(__spreadValues$1({}, watchOptions), {
+    eventFilter
+  }));
+  return { stop, pause, resume, isActive };
+}
+function unrefElement(elRef) {
+  var _a2;
+  const plain = unref(elRef);
+  return (_a2 = plain == null ? void 0 : plain.$el) != null ? _a2 : plain;
+}
+const defaultWindow = isClient ? window : void 0;
+isClient ? window.document : void 0;
+isClient ? window.navigator : void 0;
+isClient ? window.location : void 0;
+function useEventListener(...args) {
+  let target;
+  let event;
+  let listener;
+  let options;
+  if (isString(args[0])) {
+    [event, listener, options] = args;
+    target = defaultWindow;
+  } else {
+    [target, event, listener, options] = args;
+  }
+  if (!target)
+    return noop;
+  let cleanup = noop;
+  const stopWatch = watch(() => unrefElement(target), (el) => {
+    cleanup();
+    if (!el)
+      return;
+    el.addEventListener(event, listener, options);
+    cleanup = () => {
+      el.removeEventListener(event, listener, options);
+      cleanup = noop;
+    };
+  }, { immediate: true, flush: "post" });
+  const stop = () => {
+    stopWatch();
+    cleanup();
+  };
+  tryOnScopeDispose(stop);
+  return stop;
+}
+const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
+const globalKey = "__vueuse_ssr_handlers__";
+_global[globalKey] = _global[globalKey] || {};
+const handlers = _global[globalKey];
+function getSSRHandler(key, fallback) {
+  return handlers[key] || fallback;
+}
+function guessSerializerType(rawInit) {
+  return rawInit == null ? "any" : rawInit instanceof Set ? "set" : rawInit instanceof Map ? "map" : rawInit instanceof Date ? "date" : typeof rawInit === "boolean" ? "boolean" : typeof rawInit === "string" ? "string" : typeof rawInit === "object" ? "object" : Array.isArray(rawInit) ? "object" : !Number.isNaN(rawInit) ? "number" : "any";
+}
+const StorageSerializers = {
+  boolean: {
+    read: (v) => v === "true",
+    write: (v) => String(v)
+  },
+  object: {
+    read: (v) => JSON.parse(v),
+    write: (v) => JSON.stringify(v)
+  },
+  number: {
+    read: (v) => Number.parseFloat(v),
+    write: (v) => String(v)
+  },
+  any: {
+    read: (v) => v,
+    write: (v) => String(v)
+  },
+  string: {
+    read: (v) => v,
+    write: (v) => String(v)
+  },
+  map: {
+    read: (v) => new Map(JSON.parse(v)),
+    write: (v) => JSON.stringify(Array.from(v.entries()))
+  },
+  set: {
+    read: (v) => new Set(JSON.parse(v)),
+    write: (v) => JSON.stringify(Array.from(v))
+  },
+  date: {
+    read: (v) => new Date(v),
+    write: (v) => v.toISOString()
+  }
+};
+function useStorage(key, initialValue, storage, options = {}) {
+  var _a2;
+  const {
+    flush = "pre",
+    deep = true,
+    listenToStorageChanges = true,
+    writeDefaults = true,
+    shallow,
+    window: window2 = defaultWindow,
+    eventFilter,
+    onError = (e) => {
+      console.error(e);
+    }
+  } = options;
+  const data = (shallow ? shallowRef : ref)(initialValue);
+  if (!storage) {
+    try {
+      storage = getSSRHandler("getDefaultStorage", () => {
+        var _a22;
+        return (_a22 = defaultWindow) == null ? void 0 : _a22.localStorage;
+      })();
+    } catch (e) {
+      onError(e);
+    }
+  }
+  if (!storage)
+    return data;
+  const rawInit = unref(initialValue);
+  const type = guessSerializerType(rawInit);
+  const serializer = (_a2 = options.serializer) != null ? _a2 : StorageSerializers[type];
+  const { pause: pauseWatch, resume: resumeWatch } = watchPausable(data, () => write(data.value), { flush, deep, eventFilter });
+  if (window2 && listenToStorageChanges)
+    useEventListener(window2, "storage", update);
+  update();
+  return data;
+  function write(v) {
+    try {
+      if (v == null)
+        storage.removeItem(key);
+      else
+        storage.setItem(key, serializer.write(v));
+    } catch (e) {
+      onError(e);
+    }
+  }
+  function read(event) {
+    if (event && event.key !== key)
+      return;
+    pauseWatch();
+    try {
+      const rawValue = event ? event.newValue : storage.getItem(key);
+      if (rawValue == null) {
+        if (writeDefaults && rawInit !== null)
+          storage.setItem(key, serializer.write(rawInit));
+        return rawInit;
+      } else if (typeof rawValue !== "string") {
+        return rawValue;
+      } else {
+        return serializer.read(rawValue);
+      }
+    } catch (e) {
+      onError(e);
+    } finally {
+      resumeWatch();
+    }
+  }
+  function update(event) {
+    if (event && event.key !== key)
+      return;
+    data.value = read(event);
+  }
+}
+var SwipeDirection;
+(function(SwipeDirection2) {
+  SwipeDirection2["UP"] = "UP";
+  SwipeDirection2["RIGHT"] = "RIGHT";
+  SwipeDirection2["DOWN"] = "DOWN";
+  SwipeDirection2["LEFT"] = "LEFT";
+  SwipeDirection2["NONE"] = "NONE";
+})(SwipeDirection || (SwipeDirection = {}));
+const useAuthUserStore = defineStore("auth/user", {
+  state: () => ({
+    firstName: useStorage("firstName", ""),
+    lastName: "",
+    userId: null
+  }),
+  getters: {
+    fullName: (state) => `${state.firstName} ${state.lastName}`,
+    loggedIn: (state) => state.userId !== null,
+    fullUserDetails(state) {
+      return {
+        ...state,
+        fullName: this.fullName
+      };
+    }
+  },
+  actions: {
+    updateUser(payload) {
+      this.firstName = payload.firstName;
+      this.lastName = payload.lastName;
+      this.userId = payload.userId;
+    },
+    clearUser() {
+      this.$reset();
+    }
+  }
+});
+var baseForm_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".base-button{display:flex;justify-content:center;align-items:center;box-sizing:border-box;transition:all .2s ease;text-decoration:none;width:100%;margin:0;padding:1.036em 1.625em;appearance:none;outline:none;border:none;border-radius:.4375em;font-size:.875em;line-height:1.125em;text-transform:uppercase;font-weight:700}@media screen and (min-width: 600px){.base-button{width:auto}}.base-button .icon{width:16px;height:16px;margin-top:-1px}.base-button.s-collapsed>.caption{display:none}.base-button.s-pending{background-repeat:no-repeat;background-position:center center}.base-button.s-pending .caption{margin-left:25px;visibility:hidden}@media screen and (min-width: 600px){.base-button.s-pending{background-position:1.625em center}.base-button.s-pending .caption{visibility:visible}}.base-button[readonly],.base-button[disabled]{cursor:not-allowed}\n")();
+const _hoisted_1 = { class: "base-form" };
+const _hoisted_2 = ["onSubmit"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "base-form",
+  props: {
+    id: null,
+    name: null,
+    variant: null,
+    disabled: { type: Boolean },
+    pending: { type: Boolean }
   },
   setup(__props) {
+    const authUserStore = useAuthUserStore();
+    computed(() => authUserStore.firstName);
+    computed(() => authUserStore.fullName);
+    function input(event) {
+      authUserStore.updateUser({
+        firstName: event.target.value
+      });
+      console.log("input", event);
+    }
+    function reset(event) {
+      console.log("reset", event);
+    }
+    function submit(event) {
+      console.log("submit", event);
+    }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("button", _hoisted_1, [
-        createElementVNode("span", {
-          class: "caption",
-          innerHTML: __props.caption
-        }, null, 8, _hoisted_2)
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("form", {
+          ref: "form",
+          onInput: input,
+          onReset: reset,
+          onSubmit: withModifiers(submit, ["prevent"])
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 40, _hoisted_2)
       ]);
     };
   }
 });
-export { _sfc_main as BaseButton, _sfc_main$2 as BaseIcon, _sfc_main$1 as LoadingSpinner };
+export { _sfc_main$4 as BaseButton, _sfc_main as BaseForm, _sfc_main$6 as BaseIcon, _sfc_main$3 as BaseInput, _sfc_main$2 as CheckGroup, _sfc_main$5 as LoadingSpinner, _sfc_main$1 as RadioGroup };