@fy-/fws-vue 0.1.3 → 0.1.5

package/presets/Lara/index.js

@@ -0,0 +1,181 @@
+import global from "./global.js";
+import autocomplete from "./autocomplete";
+import calendar from "./calendar";
+import cascadeselect from "./cascadeselect";
+import checkbox from "./checkbox";
+import chips from "./chips";
+import colorpicker from "./colorpicker";
+import dropdown from "./dropdown";
+import floatlabel from "./floatlabel";
+import iconfield from "./iconfield";
+import inputgroup from "./inputgroup";
+import inputotp from "./inputotp";
+import inputgroupaddon from "./inputgroupaddon";
+import inputmask from "./inputmask";
+import inputnumber from "./inputnumber";
+import inputswitch from "./inputswitch";
+import inputtext from "./inputtext";
+import knob from "./knob";
+import listbox from "./listbox";
+import multiselect from "./multiselect";
+import password from "./password";
+import radiobutton from "./radiobutton";
+import rating from "./rating";
+import selectbutton from "./selectbutton";
+import slider from "./slider";
+import textarea from "./textarea";
+import togglebutton from "./togglebutton";
+import treeselect from "./treeselect";
+import tristatecheckbox from "./tristatecheckbox";
+import button from "./button";
+import speeddial from "./speeddial";
+import splitbutton from "./splitbutton";
+import datatable from "./datatable";
+import dataview from "./dataview";
+import orderlist from "./orderlist";
+import organizationchart from "./organizationchart";
+import paginator from "./paginator";
+import picklist from "./picklist";
+import tree from "./tree";
+import treetable from "./treetable";
+import timeline from "./timeline";
+import accordion from "./accordion";
+import card from "./card";
+import deferred from "./deferred";
+import divider from "./divider";
+import fieldset from "./fieldset";
+import panel from "./panel";
+import scrollpanel from "./scrollpanel";
+import splitter from "./splitter";
+import stepper from "./stepper";
+import tabview from "./tabview";
+import toolbar from "./toolbar";
+import confirmpopup from "./confirmpopup";
+import dialog from "./dialog";
+import overlaypanel from "./overlaypanel";
+import sidebar from "./sidebar";
+import tooltip from "./tooltip";
+import fileupload from "./fileupload";
+import breadcrumb from "./breadcrumb";
+import contextmenu from "./contextmenu";
+import dock from "./dock";
+import menu from "./menu";
+import menubar from "./menubar";
+import megamenu from "./megamenu";
+import panelmenu from "./panelmenu";
+import steps from "./steps";
+import tabmenu from "./tabmenu";
+import tieredmenu from "./tieredmenu";
+import message from "./message";
+import inlinemessage from "./inlinemessage";
+import toast from "./toast";
+import carousel from "./carousel";
+import galleria from "./galleria";
+import image from "./image";
+import avatar from "./avatar";
+import badge from "./badge";
+import badgedirective from "./badgedirective";
+import blockui from "./blockui";
+import chip from "./chip";
+import inplace from "./inplace";
+import metergroup from "./metergroup";
+import scrolltop from "./scrolltop";
+import skeleton from "./skeleton";
+import progressbar from "./progressbar";
+import progressspinner from "./progressspinner";
+import ripple from "./ripple";
+import tag from "./tag";
+import terminal from "./terminal";
+
+export default {
+  global,
+  directives: {
+    tooltip,
+    badgedirective,
+    ripple,
+  },
+  autocomplete,
+  calendar,
+  cascadeselect,
+  checkbox,
+  chips,
+  colorpicker,
+  dropdown,
+  floatlabel,
+  iconfield,
+  inputgroup,
+  inputotp,
+  inputgroupaddon,
+  inputmask,
+  inputnumber,
+  inputswitch,
+  inputtext,
+  knob,
+  listbox,
+  multiselect,
+  password,
+  radiobutton,
+  rating,
+  selectbutton,
+  slider,
+  textarea,
+  togglebutton,
+  treeselect,
+  tristatecheckbox,
+  button,
+  speeddial,
+  splitbutton,
+  datatable,
+  dataview,
+  orderlist,
+  organizationchart,
+  paginator,
+  picklist,
+  tree,
+  treetable,
+  timeline,
+  accordion,
+  card,
+  deferred,
+  divider,
+  fieldset,
+  panel,
+  scrollpanel,
+  splitter,
+  stepper,
+  tabview,
+  toolbar,
+  confirmpopup,
+  dialog,
+  overlaypanel,
+  sidebar,
+  fileupload,
+  breadcrumb,
+  contextmenu,
+  dock,
+  menu,
+  menubar,
+  megamenu,
+  panelmenu,
+  steps,
+  tabmenu,
+  tieredmenu,
+  message,
+  inlinemessage,
+  toast,
+  carousel,
+  galleria,
+  image,
+  avatar,
+  badge,
+  blockui,
+  chip,
+  inplace,
+  metergroup,
+  scrolltop,
+  skeleton,
+  progressbar,
+  progressspinner,
+  tag,
+  terminal,
+};

package/presets/Lara/inlinemessage/index.js

@@ -0,0 +1,36 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      "inline-flex items-center justify-center align-top gap-2",
+      "p-3 m-0 rounded-md dark:border",
+      {
+        "bg-blue-100/70 dark:bg-blue-500/20": props.severity == "info",
+        "bg-green-100/70 dark:bg-green-500/20": props.severity == "success",
+        "bg-orange-100/70 dark:bg-orange-500/20": props.severity == "warn",
+        "bg-red-100/70 dark:bg-red-500/20": props.severity == "error",
+      },
+      {
+        "dark:border-blue-400": props.severity == "info",
+        "dark:border-green-400": props.severity == "success",
+        "dark:border-orange-400": props.severity == "warn",
+        "dark:border-red-400": props.severity == "error",
+      },
+      {
+        "text-blue-700 dark:text-blue-300": props.severity == "info",
+        "text-green-700 dark:text-green-300": props.severity == "success",
+        "text-orange-700 dark:text-orange-300": props.severity == "warn",
+        "text-red-700 dark:text-red-300": props.severity == "error",
+      },
+    ],
+  }),
+  icon: {
+    class: "text-base",
+  },
+  text: {
+    class: [
+      // Font and Text
+      "text-base leading-none",
+      "font-medium",
+    ],
+  },
+};

package/presets/Lara/inplace/index.js

@@ -0,0 +1,27 @@
+export default {
+  display: {
+    class: [
+      // Display
+      "inline",
+
+      // Spacing
+      "p-3",
+
+      // Shape
+      "rounded-md",
+
+      // Colors
+      "text-surface-700 dark:text-white/80",
+
+      // States
+      "hover:bg-surface-100 hover:text-surface-700 dark:hover:bg-surface-700/80 dark:hover:text-white/80",
+
+      // Transitions
+      "transition",
+      "duration-200",
+
+      // Misc
+      "cursor-pointer",
+    ],
+  },
+};

package/presets/Lara/inputgroup/index.js

@@ -0,0 +1,5 @@
+export default {
+  root: {
+    class: ["flex items-stretch", "w-full"],
+  },
+};

package/presets/Lara/inputgroupaddon/index.js

@@ -0,0 +1,28 @@
+export default {
+  root: {
+    class: [
+      // Flex
+      "flex items-center justify-center",
+
+      // Shape
+      "first:rounded-l-md",
+      "last:rounded-r-md",
+      "border-y",
+
+      "last:border-r",
+      "border-l",
+      "border-r-0",
+
+      // Space
+      "p-3",
+
+      // Size
+      "min-w-[3rem]",
+
+      // Color
+      "bg-surface-50 dark:bg-surface-800",
+      "text-surface-600 dark:text-surface-400",
+      "border-surface-300 dark:border-surface-600",
+    ],
+  },
+};

package/presets/Lara/inputmask/index.js

@@ -0,0 +1,37 @@
+export default {
+  root: ({ context, props }) => ({
+    class: [
+      // Font
+      "font-sans leading-none",
+
+      // Spacing
+      "m-0 p-3",
+
+      // Colors
+      "text-surface-600 dark:text-surface-200",
+      "placeholder:text-surface-400 dark:placeholder:text-surface-500",
+      "bg-surface-0 dark:bg-surface-900",
+
+      "border",
+      { "border-surface-300 dark:border-surface-600": !props.invalid },
+
+      // Invalid State
+      { "border-red-500 dark:border-red-400": props.invalid },
+
+      // States
+      {
+        "hover:border-primary-500 dark:hover:border-primary-400":
+          !context.disabled && !props.invalid,
+        "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50":
+          !context.disabled,
+        "opacity-60 select-none pointer-events-none cursor-default":
+          context.disabled,
+      },
+
+      // Misc
+      "rounded-md",
+      "appearance-none",
+      "transition-colors duration-200",
+    ],
+  }),
+};

package/presets/Lara/inputnumber/index.js

@@ -0,0 +1,253 @@
+export default {
+  root: ({ props, parent }) => ({
+    class: [
+      // Flex
+      "inline-flex",
+      { "flex-col": props.showButtons && props.buttonLayout == "vertical" },
+      { "flex-1 w-[1%]": parent.instance.$name == "InputGroup" },
+
+      // Shape
+      {
+        "first:rounded-l-md rounded-none last:rounded-r-md":
+          parent.instance.$name == "InputGroup" && !props.showButtons,
+      },
+      {
+        "border-0 border-y border-l last:border-r border-surface-300 dark:border-surface-600":
+          parent.instance.$name == "InputGroup" && !props.showButtons,
+      },
+      {
+        "first:ml-0 -ml-px":
+          parent.instance.$name == "InputGroup" && !props.showButtons,
+      },
+
+      // Sizing
+      { "!w-16": props.showButtons && props.buttonLayout == "vertical" },
+    ],
+  }),
+  input: {
+    root: ({ parent, context }) => ({
+      class: [
+        // Display
+        "flex flex-auto",
+
+        // Font
+        "font-sans leading-none",
+
+        // Text
+        {
+          "text-center":
+            parent.props.showButtons && parent.props.buttonLayout == "vertical",
+        },
+
+        // Spacing
+        "p-3",
+        "m-0",
+
+        // Shape
+        "rounded-lg",
+        { "rounded-tr-none rounded-br-none": parent.props.showButtons },
+        {
+          "rounded-tl-none rounded-bl-none":
+            parent.props.showButtons &&
+            parent.props.buttonLayout == "horizontal",
+        },
+        {
+          "rounded-none":
+            parent.props.showButtons && parent.props.buttonLayout == "vertical",
+        },
+
+        {
+          "!rounded-none":
+            parent.instance.$parentInstance?.$name == "InputGroup" &&
+            !parent.props.showButtons,
+        },
+        {
+          "border-0":
+            parent.instance.$parentInstance?.$name == "InputGroup" &&
+            !parent.props.showButtons,
+        },
+
+        // Colors
+        "text-surface-600 dark:text-surface-200",
+        "placeholder:text-surface-400 dark:placeholder:text-surface-500",
+        "bg-surface-0 dark:bg-surface-900",
+        "border",
+        { "border-surface-300 dark:border-surface-600": !parent.props.invalid },
+
+        // Invalid State
+        { "border-red-500 dark:border-red-400": parent.props.invalid },
+
+        // States
+        {
+          "hover:border-primary-500 dark:hover:border-primary-400":
+            !parent.props.invalid,
+        },
+        "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50 focus:z-10",
+        {
+          "opacity-60 select-none pointer-events-none cursor-default":
+            context.disabled,
+        },
+
+        // Filled State *for FloatLabel
+        { filled: parent.instance?.$name == "FloatLabel" && context.filled },
+
+        // Position
+        {
+          "order-2":
+            parent.props.buttonLayout == "horizontal" ||
+            parent.props.buttonLayout == "vertical",
+        },
+      ],
+    }),
+  },
+  buttongroup: ({ props }) => ({
+    class: [
+      // Flex
+      "flex",
+      "flex-col",
+    ],
+  }),
+
+  incrementbutton: {
+    root: ({ parent }) => ({
+      class: [
+        // Display
+        "flex flex-auto",
+
+        // Alignment
+        "items-center",
+        "justify-center",
+        "text-center align-bottom",
+
+        // Position
+        "relative",
+        {
+          "order-3":
+            parent.props.showButtons &&
+            parent.props.buttonLayout == "horizontal",
+        },
+        {
+          "order-1":
+            parent.props.showButtons && parent.props.buttonLayout == "vertical",
+        },
+
+        // Color
+        "text-white dark:text-surface-900",
+        "bg-primary-500 dark:bg-primary-400",
+        "border border-primary-500 dark:border-primary-400",
+
+        // Sizing
+        "w-[3rem]",
+        {
+          "px-4 py-3":
+            parent.props.showButtons && parent.props.buttonLayout !== "stacked",
+        },
+        {
+          "p-0":
+            parent.props.showButtons && parent.props.buttonLayout == "stacked",
+        },
+        {
+          "w-full":
+            parent.props.showButtons && parent.props.buttonLayout == "vertical",
+        },
+
+        // Shape
+        "rounded-md",
+        {
+          "rounded-tl-none rounded-br-none rounded-bl-none":
+            parent.props.showButtons && parent.props.buttonLayout == "stacked",
+        },
+        {
+          "rounded-bl-none rounded-tl-none":
+            parent.props.showButtons &&
+            parent.props.buttonLayout == "horizontal",
+        },
+        {
+          "rounded-bl-none rounded-br-none":
+            parent.props.showButtons && parent.props.buttonLayout == "vertical",
+        },
+
+        // States
+        "focus:outline-none focus:outline-offset-0 focus:ring",
+        "hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300",
+
+        // Misc
+        "cursor-pointer overflow-hidden select-none",
+      ],
+    }),
+    label: {
+      class: "h-0 w-0",
+    },
+  },
+  decrementbutton: {
+    root: ({ parent }) => ({
+      class: [
+        // Display
+        "flex flex-auto",
+
+        // Alignment
+        "items-center",
+        "justify-center",
+        "text-center align-bottom",
+
+        // Position
+        "relative",
+        {
+          "order-1":
+            parent.props.showButtons &&
+            parent.props.buttonLayout == "horizontal",
+        },
+        {
+          "order-3":
+            parent.props.showButtons && parent.props.buttonLayout == "vertical",
+        },
+
+        // Color
+        "text-white dark:text-surface-900",
+        "bg-primary-500 dark:bg-primary-400",
+        "border border-primary-500 dark:border-primary-400",
+
+        // Sizing
+        "w-[3rem]",
+        {
+          "px-4 py-3":
+            parent.props.showButtons && parent.props.buttonLayout !== "stacked",
+        },
+        {
+          "p-0":
+            parent.props.showButtons && parent.props.buttonLayout == "stacked",
+        },
+        {
+          "w-full":
+            parent.props.showButtons && parent.props.buttonLayout == "vertical",
+        },
+
+        // Shape
+        "rounded-md",
+        {
+          "rounded-tr-none rounded-tl-none rounded-bl-none":
+            parent.props.showButtons && parent.props.buttonLayout == "stacked",
+        },
+        {
+          "rounded-tr-none rounded-br-none ":
+            parent.props.showButtons &&
+            parent.props.buttonLayout == "horizontal",
+        },
+        {
+          "rounded-tr-none rounded-tl-none ":
+            parent.props.showButtons && parent.props.buttonLayout == "vertical",
+        },
+
+        // States
+        "focus:outline-none focus:outline-offset-0 focus:ring",
+        "hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300",
+
+        // Misc
+        "cursor-pointer overflow-hidden select-none",
+      ],
+    }),
+    label: {
+      class: "h-0 w-0",
+    },
+  },
+};

package/presets/Lara/inputotp/index.js

@@ -0,0 +1,72 @@
+export default {
+  root: {
+    class: [
+      // Alignment
+      "flex items-center",
+      "gap-2",
+    ],
+  },
+  input: {
+    root: ({ props, context, parent }) => ({
+      class: [
+        // Font
+        "font-sans leading-none",
+
+        // Flex & Alignment
+        { "flex-1 w-[1%]": parent.instance.$name == "InputGroup" },
+        "text-center",
+
+        // Spacing
+        "m-0",
+        {
+          "p-3": props.size == null,
+        },
+
+        // Size
+        "w-10",
+
+        // Shape
+        { "rounded-md": parent.instance.$name !== "InputGroup" },
+        {
+          "first:rounded-l-md rounded-none last:rounded-r-md":
+            parent.instance.$name == "InputGroup",
+        },
+        {
+          "border-0 border-y border-l last:border-r":
+            parent.instance.$name == "InputGroup",
+        },
+        {
+          "first:ml-0 ml-[-1px]":
+            parent.instance.$name == "InputGroup" && !props.showButtons,
+        },
+
+        // Colors
+        "text-surface-600 dark:text-surface-200",
+        "placeholder:text-surface-400 dark:placeholder:text-surface-500",
+        "bg-surface-0 dark:bg-surface-900",
+        "border",
+        { "border-surface-300 dark:border-surface-600": !props.invalid },
+
+        // Invalid State
+        { "border-red-500 dark:border-red-400": props.invalid },
+
+        // States
+        {
+          "hover:border-primary-500 dark:hover:border-primary-400":
+            !context.disabled && !props.invalid,
+          "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50 focus:z-10":
+            !context.disabled,
+          "opacity-60 select-none pointer-events-none cursor-default":
+            context.disabled,
+        },
+
+        // Filled State *for FloatLabel
+        { filled: parent.instance?.$name == "FloatLabel" && context.filled },
+
+        // Misc
+        "appearance-none",
+        "transition-colors duration-200",
+      ],
+    }),
+  },
+};