@oneb/ui-vue 0.0.5

package/README.md

@@ -0,0 +1,46 @@
+# Oneb UI for Vue3
+
+## Usage
+
+```vue
+<template>
+  <div>
+    <OneButton label="Primary" variant="primary"/>
+    <OneLink to="home" label="Primary" variant="primary"/>
+    
+    <OneCard>
+      <OneCardHeader title="Some title" description="Some Desc"/>
+      <OneCardBody>
+        Here is content of the card.
+      </OneCardBody>
+    </OneCard>
+    
+  </div>
+</template>
+
+<script setup>
+import { OneButton, OneLink, OneCard, OneCardHeader, OneCardBody } from 'onebui-vue'
+</script>
+```
+
+## Setup
+
+### 1. src/assets/mains.css
+add line: `@import 'onebui-vue/styles.css';`
+add line: `@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');`
+
+### 2. tailwind.config.cjs
+
+1. Import config `const onebui = require('onebui-vue/tailwind.config')`
+2. Add `'onebui-vue/dist/**/*.{vue,js,ts,jsx,tsx}'` to `content`
+3. Extend config
+
+```
+const onebui = require('onebui-vue/tailwind.config')
+
+module.exports = {
+   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}', 'onebui-vue/dist/**/*.{vue,js,ts,jsx,tsx}'],
+   theme: onebui.theme,
+   plugins: [require('@tailwindcss/forms')]
+}
+```

package/dist/_plugin-vue_export-helper-dad06003.js

@@ -0,0 +1,9 @@
+const s = (t, r) => {
+  const o = t.__vccOpts || t;
+  for (const [c, e] of r)
+    o[c] = e;
+  return o;
+};
+export {
+  s as _
+};

package/dist/_plugin-vue_export-helper-f246444f.cjs

@@ -0,0 +1 @@
+"use strict";const e=(t,o)=>{const c=t.__vccOpts||t;for(const[r,s]of o)c[r]=s;return c};exports._export_sfc=e;

package/dist/button/button.d.ts

@@ -0,0 +1,39 @@
+import type { ExtractPropTypes, FunctionalComponent, Component } from "vue";
+export type ButtonVariantType = 'primary' | 'default' | 'warning' | 'danger' | 'info' | 'touch' | 'link' | 'none';
+export type ButtonSizeType = 'sm' | 'md' | 'lg';
+export type ButtonIconType = FunctionalComponent | Component;
+export declare const buttonProps: {
+    variant: {
+        type: PropType<ButtonVariantType>;
+        default: string;
+    };
+    size: {
+        type: PropType<ButtonSizeType>;
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    icon: {
+        type: PropType<any>;
+    };
+    isLoading: {
+        type: BooleanConstructor;
+    };
+    isSubmit: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    iconClass: {
+        type: PropType<string | string[]>;
+    };
+};
+export type ButtonProps = ExtractPropTypes<typeof buttonProps>;

package/dist/button/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),p=require("../_plugin-vue_export-helper-f246444f.cjs");const b={},g={class:"spinner",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",style:{animation:"one-sp-ico-rot 2.7s linear infinite"}},m=e.createElementVNode("circle",{style:{"stroke-linecap":"round",animation:"one-sp-ico-dash 1.7s ease-in-out infinite"},class:"opacity-75",cx:"12",cy:"12",r:"8",fill:"none",stroke:"currentColor","stroke-width":"2"},null,-1),h=[m];function f(t,n){return e.openBlock(),e.createElementBlock("svg",g,h)}const y=p._export_sfc(b,[["render",f]]),v={variant:{type:String,default:"primary"},size:{type:String,default:"md"},label:{type:String},icon:{type:[Function,Object]},isLoading:{type:Boolean},isSubmit:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},active:{type:Boolean,default:!1},iconClass:{type:[String,Array]}},w=["relative inline-flex","border","items-center justify-center","text-sm font-medium whitespace-nowrap","disabled:opacity-50 disabled:cursor-default","focus:outline-none focus:ring-2 focus:ring-offset-2","transition-colors duration-200"],k={sm:["px-2 py-1"],md:["px-3 py-2","h-10"],lg:["px-4 py-3","h-12"]},_={primary:["rounded-md   border-transparent    bg-primary-base disabled:bg-primary-hover text-white hover:bg-primary-hover focus:ring-primary-glow"],secondary:["rounded-md border-primary-stroke bg-primary-body disabled:bg-primary-body-hover text-black hover:bg-primary-body-hover focus:ring-tertiary-glow"],info:["rounded-md   border-transparent bg-info-base disabled:bg-info-hover text-white hover:bg-info-hover focus:ring-info-glow"],success:["rounded-md   border-transparent bg-success-base disabled:bg-success-hover text-white hover:bg-success-hover focus:ring-success-glow"],warning:["rounded-md   border-transparent bg-warning-base disabled:bg-warning-hover text-white hover:bg-warning-hover focus:ring-warning-glow"],danger:["rounded-md   border-transparent bg-danger-base disabled:bg-danger-hover text-white hover:bg-danger-hover focus:ring-danger-glow"],touch:["rounded-full border-transparent text-black hover:bg-primary-body-hover hover:shadow p-3 focus:ring-tertiary-glow"],link:["rounded-md   border-transparent items-center text-info-base hover:text-info-hover"],none:["rounded-md   border-transparent text-gray-500"]},C=(t="primary",n="md")=>{const o=[];return o.push(...w),o.push(..._[t]??[]),t!=="touch"&&o.push(...k[n]??[]),o},B=["disabled","title","type","onClick"],x=e.defineComponent({__name:"OneButton",props:v,emits:["click"],setup(t,{emit:n}){const o=t,a=()=>{n("click")},r=e.computed(()=>o.icon),l=e.computed(()=>{const s=C(o.variant,o.size);return o.variant==="touch"&&o.active&&s.push("bg-primary-body-active"),s}),c=e.computed(()=>o.disabled||o.isLoading),d=e.computed(()=>o.label&&o.label.length>0&&o.variant!=="touch"),u=e.computed(()=>{const s=["inline-block text-ellipsis overflow-hidden"];return(o.icon!=null||o.isLoading)&&s.push("ml-2"),s}),i=e.computed(()=>{const s=[];return o.size==="sm"?s.push("w-3 h-3"):o.size==="lg"?s.push("w-5 h-5"):s.push("w-4 h-4"),typeof o.iconClass=="string"?s.push(o.iconClass):o.iconClass instanceof Array&&s.push(...o.iconClass),s});return(s,L)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(l.value),disabled:c.value,title:s.label,type:s.isSubmit?"submit":"button",onClick:e.withModifiers(a,["stop"])},[s.isLoading?(e.openBlock(),e.createBlock(y,{key:0,class:e.normalizeClass(i.value)},null,8,["class"])):r.value!=null?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.value),{key:1,class:e.normalizeClass(i.value)},null,8,["class"])):e.createCommentVNode("",!0),d.value?(e.openBlock(),e.createElementBlock("span",{key:2,class:e.normalizeClass(u.value)},e.toDisplayString(s.label),3)):e.createCommentVNode("",!0)],10,B))}});exports.OneButton=x;

package/dist/button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as OneButton } from './OneButton.vue';
+export type { ButtonProps } from './button';

package/dist/button/index.js

@@ -0,0 +1,123 @@
+import { openBlock as o, createElementBlock as a, createElementVNode as m, defineComponent as y, computed as t, normalizeClass as i, withModifiers as v, createBlock as d, resolveDynamicComponent as w, createCommentVNode as u, toDisplayString as _ } from "vue";
+import { _ as k } from "../_plugin-vue_export-helper-dad06003.js";
+const x = {}, C = {
+  class: "spinner",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  style: { animation: "one-sp-ico-rot 2.7s linear infinite" }
+}, B = /* @__PURE__ */ m("circle", {
+  style: { "stroke-linecap": "round", animation: "one-sp-ico-dash 1.7s ease-in-out infinite" },
+  class: "opacity-75",
+  cx: "12",
+  cy: "12",
+  r: "8",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, null, -1), L = [
+  B
+];
+function S(n, r) {
+  return o(), a("svg", C, L);
+}
+const z = /* @__PURE__ */ k(x, [["render", S]]), I = {
+  variant: {
+    type: String,
+    default: "primary"
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  label: {
+    type: String
+  },
+  icon: {
+    type: [Function, Object]
+  },
+  isLoading: {
+    type: Boolean
+  },
+  isSubmit: {
+    type: Boolean,
+    default: !1
+  },
+  disabled: {
+    type: Boolean,
+    default: !1
+  },
+  active: {
+    type: Boolean,
+    default: !1
+  },
+  iconClass: {
+    type: [String, Array]
+  }
+}, D = [
+  "relative inline-flex",
+  "border",
+  "items-center justify-center",
+  "text-sm font-medium whitespace-nowrap",
+  "disabled:opacity-50 disabled:cursor-default",
+  "focus:outline-none focus:ring-2 focus:ring-offset-2",
+  "transition-colors duration-200"
+], O = {
+  sm: ["px-2 py-1"],
+  md: ["px-3 py-2", "h-10"],
+  lg: ["px-4 py-3", "h-12"]
+}, j = {
+  primary: ["rounded-md   border-transparent    bg-primary-base disabled:bg-primary-hover text-white hover:bg-primary-hover focus:ring-primary-glow"],
+  secondary: ["rounded-md border-primary-stroke bg-primary-body disabled:bg-primary-body-hover text-black hover:bg-primary-body-hover focus:ring-tertiary-glow"],
+  info: ["rounded-md   border-transparent bg-info-base disabled:bg-info-hover text-white hover:bg-info-hover focus:ring-info-glow"],
+  success: ["rounded-md   border-transparent bg-success-base disabled:bg-success-hover text-white hover:bg-success-hover focus:ring-success-glow"],
+  warning: ["rounded-md   border-transparent bg-warning-base disabled:bg-warning-hover text-white hover:bg-warning-hover focus:ring-warning-glow"],
+  danger: ["rounded-md   border-transparent bg-danger-base disabled:bg-danger-hover text-white hover:bg-danger-hover focus:ring-danger-glow"],
+  touch: ["rounded-full border-transparent text-black hover:bg-primary-body-hover hover:shadow p-3 focus:ring-tertiary-glow"],
+  link: ["rounded-md   border-transparent items-center text-info-base hover:text-info-hover"],
+  none: ["rounded-md   border-transparent text-gray-500"]
+}, A = (n = "primary", r = "md") => {
+  const e = [];
+  return e.push(...D), e.push(...j[n] ?? []), n !== "touch" && e.push(...O[r] ?? []), e;
+}, E = ["disabled", "title", "type", "onClick"], F = /* @__PURE__ */ y({
+  __name: "OneButton",
+  props: I,
+  emits: ["click"],
+  setup(n, { emit: r }) {
+    const e = n, p = () => {
+      r("click");
+    }, l = t(() => e.icon), b = t(() => {
+      const s = A(e.variant, e.size);
+      return e.variant === "touch" && e.active && s.push("bg-primary-body-active"), s;
+    }), g = t(() => e.disabled || e.isLoading), h = t(() => e.label && e.label.length > 0 && e.variant !== "touch"), f = t(() => {
+      const s = [
+        "inline-block text-ellipsis overflow-hidden"
+      ];
+      return (e.icon != null || e.isLoading) && s.push("ml-2"), s;
+    }), c = t(() => {
+      const s = [];
+      return e.size === "sm" ? s.push("w-3 h-3") : e.size === "lg" ? s.push("w-5 h-5") : s.push("w-4 h-4"), typeof e.iconClass == "string" ? s.push(e.iconClass) : e.iconClass instanceof Array && s.push(...e.iconClass), s;
+    });
+    return (s, N) => (o(), a("button", {
+      class: i(b.value),
+      disabled: g.value,
+      title: s.label,
+      type: s.isSubmit ? "submit" : "button",
+      onClick: v(p, ["stop"])
+    }, [
+      s.isLoading ? (o(), d(z, {
+        key: 0,
+        class: i(c.value)
+      }, null, 8, ["class"])) : l.value != null ? (o(), d(w(l.value), {
+        key: 1,
+        class: i(c.value)
+      }, null, 8, ["class"])) : u("", !0),
+      h.value ? (o(), a("span", {
+        key: 2,
+        class: i(f.value)
+      }, _(s.label), 3)) : u("", !0)
+    ], 10, E));
+  }
+});
+export {
+  F as OneButton
+};

package/dist/card/card.d.ts

@@ -0,0 +1,12 @@
+import type { ExtractPropTypes } from "vue";
+export declare const cardHeaderProps: {
+    title: {
+        type: PropType<string>;
+        required: boolean;
+    };
+    description: {
+        type: PropType<string>;
+        required: boolean;
+    };
+};
+export type CardHeaderProps = ExtractPropTypes<typeof cardHeaderProps>;

package/dist/card/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),o=require("../_plugin-vue_export-helper-f246444f.cjs"),n={},s={class:"mb-4 bg-white border border-block rounded"};function c(r,t){return e.openBlock(),e.createElementBlock("div",s,[e.renderSlot(r.$slots,"default")])}const d=o._export_sfc(n,[["render",c]]),l={},a={class:"p-3"};function i(r,t){return e.openBlock(),e.createElementBlock("div",a,[e.renderSlot(r.$slots,"default")])}const _=o._export_sfc(l,[["render",i]]),p={title:{type:String,required:!1},description:{type:String,required:!1}},u={class:"p-3 bg-gray-50 rounded-t flex items-center justify-between space-x-3 border-b border-secondary-stroke"},f={class:"w-full"},m={key:0,class:"text-lg font-medium"},k={key:1,class:"text-xs text-gray-700 pt-2"},b={class:"flex items-center space-x-2"},y=e.defineComponent({__name:"OneCardHeader",props:p,setup(r){return(t,C)=>(e.openBlock(),e.createElementBlock("div",u,[e.createElementVNode("div",f,[t.title?(e.openBlock(),e.createElementBlock("p",m,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),t.description?(e.openBlock(),e.createElementBlock("p",k,e.toDisplayString(t.description),1)):e.createCommentVNode("",!0)]),e.createElementVNode("div",b,[e.renderSlot(t.$slots,"default")])]))}}),g={},B={class:"p-3 bg-gray-50 rounded-b border-t border-secondary-stroke"};function h(r,t){return e.openBlock(),e.createElementBlock("div",B,[e.renderSlot(r.$slots,"default")])}const $=o._export_sfc(g,[["render",h]]);exports.OneCard=d;exports.OneCardBody=_;exports.OneCardFooter=$;exports.OneCardHeader=y;

package/dist/card/index.d.ts

@@ -0,0 +1,5 @@
+export { default as OneCard } from './OneCard.vue';
+export { default as OneCardBody } from './OneCardBody.vue';
+export { default as OneCardHeader } from './OneCardHeader.vue';
+export { default as OneCardFooter } from './OneCardFooter.vue';
+export type { CardHeaderProps } from './card';

package/dist/card/index.js

@@ -0,0 +1,56 @@
+import { openBlock as r, createElementBlock as s, renderSlot as o, defineComponent as i, createElementVNode as d, toDisplayString as c, createCommentVNode as a } from "vue";
+import { _ as n } from "../_plugin-vue_export-helper-dad06003.js";
+const _ = {}, l = { class: "mb-4 bg-white border border-block rounded" };
+function p(t, e) {
+  return r(), s("div", l, [
+    o(t.$slots, "default")
+  ]);
+}
+const B = /* @__PURE__ */ n(_, [["render", p]]), f = {}, u = { class: "p-3" };
+function m(t, e) {
+  return r(), s("div", u, [
+    o(t.$slots, "default")
+  ]);
+}
+const H = /* @__PURE__ */ n(f, [["render", m]]), b = {
+  title: {
+    type: String,
+    required: !1
+  },
+  description: {
+    type: String,
+    required: !1
+  }
+}, h = { class: "p-3 bg-gray-50 rounded-t flex items-center justify-between space-x-3 border-b border-secondary-stroke" }, y = { class: "w-full" }, $ = {
+  key: 0,
+  class: "text-lg font-medium"
+}, g = {
+  key: 1,
+  class: "text-xs text-gray-700 pt-2"
+}, k = { class: "flex items-center space-x-2" }, q = /* @__PURE__ */ i({
+  __name: "OneCardHeader",
+  props: b,
+  setup(t) {
+    return (e, O) => (r(), s("div", h, [
+      d("div", y, [
+        e.title ? (r(), s("p", $, c(e.title), 1)) : a("", !0),
+        e.description ? (r(), s("p", g, c(e.description), 1)) : a("", !0)
+      ]),
+      d("div", k, [
+        o(e.$slots, "default")
+      ])
+    ]));
+  }
+}), C = {}, v = { class: "p-3 bg-gray-50 rounded-b border-t border-secondary-stroke" };
+function x(t, e) {
+  return r(), s("div", v, [
+    o(t.$slots, "default")
+  ]);
+}
+const E = /* @__PURE__ */ n(C, [["render", x]]);
+export {
+  B as OneCard,
+  H as OneCardBody,
+  E as OneCardFooter,
+  q as OneCardHeader
+};

package/dist/dropdown/dropdown.d.ts

@@ -0,0 +1,24 @@
+import type { ExtractPropTypes } from "vue";
+export declare const dropdownProps: {
+    title: {
+        type: StringConstructor;
+    };
+    stick: {
+        type: PropType<"right" | "left">;
+        default: string;
+    };
+};
+export type DropdownProps = ExtractPropTypes<typeof dropdownProps>;
+export declare const dropdownItemProps: {
+    variant: {
+        type: PropType<"primary" | "warning" | "danger" | "info" | "secondary">;
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    icon: {
+        type: PropType<any>;
+    };
+};
+export type DropdownItemProps = ExtractPropTypes<typeof dropdownItemProps>;

package/dist/dropdown/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../index-26c86446.cjs");require("vue");require("../_plugin-vue_export-helper-f246444f.cjs");exports.OneBrowserMenu=e._sfc_main$3;exports.OneDropdown=e._sfc_main;exports.OneDropdownDivider=e.OneDropdownDivider;exports.OneDropdownItem=e._sfc_main$1;exports.OneUserMenu=e._sfc_main$2;

package/dist/dropdown/index.d.ts

@@ -0,0 +1,7 @@
+export { default as OneDropdown } from './OneDropdown.vue';
+export { default as OneDropdownItem } from './OneDropdownItem.vue';
+export { default as OneDropdownDivider } from './OneDropdownDivider.vue';
+export { default as OneUserMenu } from './OneUserMenu.vue';
+export { default as OneBrowserMenu } from './OneBrowserMenu.vue';
+export type { DropdownProps, DropdownItemProps } from './dropdown';
+export type { UserMenuProps, BrowserMenuProps } from './menu';

package/dist/dropdown/index.js

@@ -0,0 +1,10 @@
+import { c as s, _ as a, O as p, a as O, b as d } from "../index-6f93552a.js";
+import "vue";
+import "../_plugin-vue_export-helper-dad06003.js";
+export {
+  s as OneBrowserMenu,
+  a as OneDropdown,
+  p as OneDropdownDivider,
+  O as OneDropdownItem,
+  d as OneUserMenu
+};

package/dist/dropdown/menu.d.ts

@@ -0,0 +1,67 @@
+import type { ExtractPropTypes } from "vue";
+export declare const userMenuProps: {
+    user: {
+        type: PropType<{
+            name: string;
+            email: string;
+            photo_url?: string;
+        }>;
+        required: boolean;
+    };
+    menu: {
+        type: PropType<{
+            label: string;
+            icon?: any;
+            click?: () => void;
+        }[]>;
+        default: () => any[];
+    };
+    accountLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    logoutLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    onAccount: {
+        type: FunctionConstructor;
+    };
+    onLogout: {
+        type: FunctionConstructor;
+    };
+};
+export declare const browserMenuProps: {
+    workspace: {
+        type: PropType<{
+            name: string;
+            photo_url?: string;
+        }>;
+        required: boolean;
+    };
+    apps: {
+        type: PropType<{
+            id: string;
+            name: string;
+            photo_url?: string;
+            open_url?: string;
+        }[]>;
+        required: boolean;
+    };
+    appsTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    changeLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    onChange: {
+        type: FunctionConstructor;
+    };
+    onApp: {
+        type: FunctionConstructor;
+    };
+};
+export type UserMenuProps = ExtractPropTypes<typeof userMenuProps>;
+export type BrowserMenuProps = ExtractPropTypes<typeof browserMenuProps>;

package/dist/form/form.d.ts

@@ -0,0 +1,129 @@
+import type { ExtractPropTypes, ComputedRef } from "vue";
+export type ValidationType = Record<string, string[] | undefined>;
+export declare const formProps: {
+    id: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    validation: {
+        type: PropType<ValidationType>;
+        required: boolean;
+    };
+};
+export type FormProvide = {
+    formId: ComputedRef<string | undefined>;
+    validation: ComputedRef<ValidationType | undefined>;
+};
+export type FormProps = ExtractPropTypes<typeof formProps>;
+export declare const formFieldProps: {
+    id: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    name: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    hint: {
+        type: StringConstructor;
+        required: boolean;
+        default: string;
+    };
+    errors: {
+        type: PropType<string[]>;
+        required: boolean;
+    };
+};
+export type FormFieldProps = ExtractPropTypes<typeof formFieldProps>;
+export type FormFieldProvide = {
+    inputId: ComputedRef<string | undefined>;
+    inputName: ComputedRef<string | undefined>;
+    hasError: ComputedRef<boolean>;
+};
+export declare const formFeedbackProps: {
+    name: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    errors: {
+        type: PropType<string[]>;
+        required: boolean;
+    };
+};
+export type FormFeedbackProps = ExtractPropTypes<typeof formFeedbackProps>;
+export declare const formLabelProps: {
+    label: {
+        type: StringConstructor;
+        required: boolean;
+    };
+};
+export type FormLabelProps = ExtractPropTypes<typeof formLabelProps>;
+export declare const formInputProps: {
+    id: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    name: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: {
+        type: PropType<any>;
+    };
+    type: {
+        type: PropType<"number" | "text" | "password" | "checkbox" | "radio" | "range" | "select" | "textarea">;
+        default: string;
+    };
+    modelValue: {
+        required: boolean;
+        type: PropType<string | number | boolean | string[]>;
+    };
+    autofocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    large: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    invalid: {
+        type: BooleanConstructor;
+        required: boolean;
+        default: boolean;
+    };
+    options: {
+        type: PropType<{
+            key: string;
+            value: string;
+        }[]>;
+        required: boolean;
+        default: any[];
+    };
+};
+export type FormInputProps = ExtractPropTypes<typeof formInputProps>;
+export declare const injectForm: () => any;
+export declare const injectFormField: () => any;

package/dist/form/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),V={id:{type:String,required:!1},validation:{type:Object,required:!1}},F={id:{type:String,required:!1},label:{type:String,required:!1},name:{type:String,required:!1},hint:{type:String,required:!1,default:""},errors:{type:Array,required:!1}},N={name:{type:String,required:!1},errors:{type:Array,required:!1}},C={label:{type:String,required:!1}},S={id:{type:String,required:!1},name:{type:String,required:!1},placeholder:{type:String,default:""},icon:{type:[Function,Object]},type:{type:String,default:"text"},modelValue:{required:!1,type:[String,Number,Array,Boolean]},autofocus:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},large:{type:Boolean,default:!1},invalid:{type:Boolean,required:!1,default:!1},options:{type:Array,required:!1,default:[]}},k=()=>e.inject("BaseForm",()=>({formId:e.computed(()=>{}),validation:e.computed(()=>{})}),!0),m=()=>e.inject("BaseFormField",()=>({inputId:e.computed(()=>{}),inputName:e.computed(()=>{}),hasError:e.computed(()=>!1)}),!0),$=["onSubmit","id"],_=e.defineComponent({__name:"OneForm",props:V,emits:["submit"],setup(a,{emit:o}){const n=a;e.provide("BaseForm",{formId:e.computed(()=>n.id),validation:e.computed(()=>n.validation)});const d=()=>{o("submit")};return(t,l)=>(e.openBlock(),e.createElementBlock("form",{onSubmit:e.withModifiers(d,["prevent"]),id:t.id,class:"space-y-3"},[e.renderSlot(t.$slots,"default")],40,$))}}),q=["for"],v=e.defineComponent({__name:"OneFormLabel",props:C,setup(a){const{inputId:o}=m();return(n,d)=>(e.openBlock(),e.createElementBlock("label",{for:e.unref(o),class:"block text-sm font-medium text-primary-content select-none"},[e.renderSlot(n.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(n.label),1)])],8,q))}}),I={key:0,class:"text-danger-content text-xs space-y-1"},h=e.defineComponent({__name:"OneFormFeedback",props:N,setup(a){const o=a,{validation:n}=k(),{inputName:d}=m(),t=e.computed(()=>d.value==null&&o.name==null?o.errors??[]:n.value==null?o.errors??[]:(n.value??{})[o.name||d.value]??o.errors??[]);return(l,s)=>t.value.length>0?(e.openBlock(),e.createElementBlock("div",I,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.value,u=>(e.openBlock(),e.createElementBlock("div",{key:u},e.toDisplayString(u),1))),128))])):e.createCommentVNode("",!0)}});function O(a,o){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.8",stroke:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"}),e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M15 12a3 3 0 11-6 0 3 3 0 016 0z"})])}function j(a,o){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.8",stroke:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"})])}function M(a,o){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.8",stroke:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18L18 6M6 6l12 12"})])}function L(a,o){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.8",stroke:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M19.5 8.25l-7.5 7.5-7.5-7.5"})])}const z={key:0,class:"w-full onebselect relative group"},D=["id","disabled"],P=["selected"],A=["selected"],T={class:"absolute p-2 px-3 rounded-md h-full flex items-center right-1 top-0 select-none pointer-events-none"},G=["name","id","value","placeholder","disabled","readonly"],H={key:2,class:"flex w-full space-x-3 items-center"},J=["type","name","id","disabled","readonly","checked"],K=["for"],Q={key:3,class:"w-full space-y-1"},R=["name","id","value","disabled","readonly","checked"],U=["for"],W={key:4,class:"relative"},X={class:"absolute p-2 px-3 rounded-md h-full flex items-center select-none"},Y=["type","name","id","value","placeholder","disabled","readonly"],b=e.defineComponent({__name:"OneFormInput",props:S,emits:["update:modelValue"],setup(a,{emit:o}){const n=a,{inputId:d,inputName:t,hasError:l}=m(),s=e.ref(null),u=e.ref(!1);e.onMounted(()=>{n.autofocus&&s.value&&s.value.focus()});const B=e.computed(()=>["range","number"].includes(n.type)),g=e.computed(()=>n.modelValue!=null&&n.modelValue!==""),E=e.computed(()=>typeof n.modelValue=="string"?n.modelValue:""),c=e.computed(()=>n.id?n.id:n.name?`${d.value}-${n.name}`:d.value),w=()=>{o("update:modelValue","")},p=r=>{n.type==="checkbox"?o("update:modelValue",r.target.checked):B.value?o("update:modelValue",Number(r.target.value)):o("update:modelValue",r.target.value)};return(r,f)=>r.type==="select"?(e.openBlock(),e.createElementBlock("div",z,[e.createElementVNode("select",{id:c.value,ref_key:"inputElement",ref:s,class:e.normalizeClass(["border border-primary-stroke px-3 w-full",{"border-danger-base":e.unref(l)||r.invalid,"text-secondary-content":r.modelValue===""||r.modelValue==null,"rounded-full":r.rounded,"rounded-md":!r.rounded,"text-lg":r.large,"py-2.5":r.large,"py-2":!r.large}]),disabled:r.disabled},[r.placeholder?(e.openBlock(),e.createElementBlock("option",{key:0,selected:r.modelValue===""||r.modelValue==null,disabled:"",hidden:""},e.toDisplayString(r.placeholder),9,P)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.options,i=>(e.openBlock(),e.createElementBlock("option",{selected:i.key===r.modelValue,key:i.key},e.toDisplayString(i.value),9,A))),128))],10,D),e.createElementVNode("div",T,[e.createVNode(e.unref(L),{class:e.normalizeClass(["w-4 h-4 text-secondary-content",{"group-hover:text-primary-base":!r.disabled,"opacity-50":r.disabled}])},null,8,["class"])])])):r.type==="textarea"?(e.openBlock(),e.createElementBlock("textarea",{key:1,name:r.name||e.unref(t),id:c.value,value:E.value,onInput:p,rows:"3",class:e.normalizeClass(["border border-primary-stroke px-3 w-full",{"border-danger-base":e.unref(l),"rounded-3xl":r.rounded,"rounded-md":!r.rounded,"text-lg":r.large,"py-2.5":r.large,"py-2":!r.large}]),placeholder:r.placeholder,disabled:r.disabled,readonly:r.readonly,ref_key:"inputElement",ref:s},null,42,G)):r.type==="checkbox"?(e.openBlock(),e.createElementBlock("div",H,[e.createElementVNode("input",{type:r.type,name:r.name||e.unref(t),id:c.value,value:!0,onInput:p,disabled:r.disabled,readonly:r.readonly,class:e.normalizeClass(["rounded-md border border-primary-stroke px-3 py-2 shadow-sm",{"border-danger-base":e.unref(l)||r.invalid}]),checked:r.modelValue===!0,ref_key:"inputElement",ref:s},null,42,J),e.createElementVNode("label",{for:c.value,class:"text-primary-content select-none"},e.toDisplayString(r.placeholder),9,K)])):r.type==="radio"?(e.openBlock(),e.createElementBlock("div",Q,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.options,(i,y)=>(e.openBlock(),e.createElementBlock("div",{key:i.key,class:"flex w-full space-x-3 items-center"},[e.createElementVNode("input",{type:"radio",name:r.name||e.unref(t),id:`${c.value}-${y}`,value:i.key,onInput:p,disabled:r.disabled,readonly:r.readonly,class:e.normalizeClass(["rounded-md border border-primary-stroke px-3 py-2 shadow-sm",{"border-danger-base":e.unref(l)||r.invalid}]),checked:i.key===r.modelValue,ref_for:!0,ref_key:"inputElement",ref:s},null,42,R),e.createElementVNode("label",{for:`${c.value}-${y}`,class:"text-primary-content select-none"},e.toDisplayString(i.value),9,U)]))),128))])):(e.openBlock(),e.createElementBlock("div",W,[e.createElementVNode("div",X,[r.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.icon),{key:0,class:"w-5 h-5 text-primary-content"})):e.createCommentVNode("",!0)]),e.createElementVNode("input",{type:u.value?"text":r.type,name:r.name||e.unref(t),id:c.value,value:r.modelValue,onInput:p,placeholder:r.placeholder,disabled:r.disabled,readonly:r.readonly,class:e.normalizeClass(["border border-primary-stroke w-full px-3",{"shadow-sm":r.type!=="range","border-danger-base":e.unref(l)||r.invalid,"pl-10":r.icon!=null,"pr-10":r.type==="password","rounded-full":r.rounded,"rounded-md":!r.rounded,"text-lg":r.large,"py-2.5":r.large,"py-2":!r.large}]),ref_key:"inputElement",ref:s},null,42,Y),r.clearable&&g.value?(e.openBlock(),e.createElementBlock("div",{key:0,onClick:w,class:"absolute p-2 px-3 rounded-md h-full flex items-center right-0 top-0 hover:cursor-pointer select-none"},[e.createVNode(e.unref(M),{class:"w-5 h-5 text-secondary-content hover:text-primary-base"})])):r.type==="password"?(e.openBlock(),e.createElementBlock("div",{key:1,onClick:f[0]||(f[0]=i=>u.value=!u.value),class:"absolute p-2 px-3 rounded-md h-full flex items-center right-0 top-0 hover:cursor-pointer select-none"},[u.value?(e.openBlock(),e.createBlock(e.unref(j),{key:0,class:"w-5 h-5 text-primary-content hover:text-primary-base"})):(e.openBlock(),e.createBlock(e.unref(O),{key:1,class:"w-5 h-5 text-secondary-content hover:text-primary-base"}))])):e.createCommentVNode("",!0)]))}});const Z={class:"space-y-1"},x={key:2,class:"text-xs text-secondary-content select-none"},ee=e.defineComponent({__name:"OneFormField",props:F,setup(a){const o=a,{formId:n,validation:d}=k(),t=e.computed(()=>o.errors!=null&&o.errors.length>0?!0:o.name==null?!1:(d.value??{})[o.name]!=null);return e.provide("BaseFormField",{inputId:e.computed(()=>{const l=n.value||"form";if(o.id!=null)return`${l}-${o.id}`;if(o.name!=null)return`${l}-field-${o.name}`}),inputName:e.computed(()=>o.name),hasError:t}),(l,s)=>(e.openBlock(),e.createElementBlock("div",Z,[l.label?(e.openBlock(),e.createBlock(v,{key:0,label:l.label},null,8,["label"])):e.createCommentVNode("",!0),e.renderSlot(l.$slots,"default",{},()=>[e.createVNode(b)]),t.value?(e.openBlock(),e.createBlock(h,{key:1,errors:l.errors},null,8,["errors"])):l.hint.length>0?(e.openBlock(),e.createElementBlock("p",x,e.toDisplayString(l.hint),1)):e.createCommentVNode("",!0)]))}});exports.OneForm=_;exports.OneFormFeedback=h;exports.OneFormField=ee;exports.OneFormInput=b;exports.OneFormLabel=v;

package/dist/form/index.d.ts

@@ -0,0 +1,6 @@
+export { default as OneForm } from './OneForm.vue';
+export { default as OneFormField } from './OneFormField.vue';
+export { default as OneFormFeedback } from './OneFormFeedback.vue';
+export { default as OneFormLabel } from './OneFormLabel.vue';
+export { default as OneFormInput } from './OneFormInput.vue';
+export type { FormProps, FormProvide, FormFieldProps, FormFieldProvide, FormFeedbackProps, FormLabelProps, FormInputProps, } from './form';