@fy-/fws-vue 0.3.0 → 0.3.2

package/components/ui/DefaultInput.vue

@@ -122,6 +122,8 @@ defineExpose({ focus, blur, getInputRef });
               'search',
               'url',
               'mask',
+              'date',
+              'datetime',
             ].includes(type)
           "
           class="relative"
@@ -171,50 +173,6 @@ defineExpose({ focus, blur, getInputRef });
             class="block p-2.5 w-full text-sm text-fv-neutral-900 bg-fv-neutral-50 rounded-lg border border-fv-neutral-300 focus:ring-fv-primary-500 focus:border-fv-primary-500 dark:bg-fv-neutral-700 dark:border-fv-neutral-600 dark:placeholder-fv-neutral-400 dark:text-white dark:focus:ring-fv-primary-500 dark:focus:border-fv-primary-500"
           ></textarea>
         </div>
-        <div
-          class="relative max-w-sm"
-          v-else-if="type == 'datetime' || type == 'date'"
-        >
-          <div
-            class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none"
-          >
-            <svg
-              class="w-4 h-4 text-fv-neutral-500 dark:text-fv-neutral-400"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-            >
-              <path
-                d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"
-              />
-            </svg>
-          </div>
-          <label
-            :for="id"
-            v-if="label"
-            class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
-            >{{ label }}</label
-          >
-
-          <input
-            datepicker
-            ref="inputRef"
-            type="text"
-            :class="{
-              error: checkErrors,
-            }"
-            class="bg-fv-neutral-50 border border-fv-neutral-300 text-fv-neutral-900 text-sm rounded-lg focus:ring-fv-primary-500 focus:border-fv-primary-500 block w-full ps-10 p-2.5 dark:bg-fv-neutral-700 dark:border-fv-neutral-600 dark:placeholder-fv-neutral-400 dark:text-white dark:focus:ring-fv-primary-500 dark:focus:border-fv-primary-500"
-            :id="id"
-            :name="id"
-            :disabled="disabled"
-            :aria-describedby="help ? `${id}-help` : id"
-            :required="req"
-            @focus="handleFocus"
-            @blur="handleBlur"
-            :placeholder="placeholder"
-          />
-        </div>
         <div class="relative" v-else-if="type == 'select'">
           <label
             :for="id"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "repository": {
@@ -24,16 +24,6 @@
     "./style.css": {
       "import": "./style.css",
       "require": "./style.css"
-    },
-    "./presets/Lara": {
-      "import": "./presets/Lara/index.js",
-      "require": "./presets/Lara/index.js",
-      "types": "./presets/Lara/index.js"
-    },
-    "./presets/Wind": {
-      "import": "./presets/Wind/index.js",
-      "require": "./presets/Wind/index.js",
-      "types": "./presets/Wind/index.js"
     }
   },
   "peerDependencies": {

package/presets/Lara/accordion/index.js

@@ -1,86 +0,0 @@
-export default {
-  accordiontab: {
-    root: {
-      class: "mb-1",
-    },
-    header: ({ props }) => ({
-      class: [
-        // State
-        {
-          "select-none pointer-events-none cursor-default opacity-60":
-            props?.disabled,
-        },
-      ],
-    }),
-    headerAction: ({ context }) => ({
-      class: [
-        // Font
-        "font-bold",
-        "leading-none",
-
-        // Alignments
-        "flex items-center",
-        "relative",
-
-        // Sizing
-        "p-5",
-
-        // Shape
-        "rounded-t-md",
-        {
-          "rounded-br-md rounded-bl-md": !context.active,
-          "rounded-br-0 rounded-bl-0": context.active,
-        },
-
-        // Color
-        "border border-surface-200 dark:border-surface-700",
-        "bg-surface-50 dark:bg-surface-800",
-        "text-surface-600 dark:text-surface-0/80",
-        { "text-surface-900": context.active },
-
-        // Transition
-        "transition duration-200 ease-in-out",
-        "transition-shadow duration-200",
-
-        // States
-        "hover:bg-surface-100 dark:hover:bg-surface-700/40",
-        "hover:text-surface-900",
-        "focus:outline-none focus:outline-offset-0 focus-visible:ring focus-visible:ring-primary-400/50 ring-inset dark:focus-visible:ring-primary-300/50", // Focus
-
-        // Misc
-        "cursor-pointer no-underline select-none",
-      ],
-    }),
-    headerIcon: {
-      class: "inline-block mr-2",
-    },
-    headerTitle: {
-      class: "leading-none",
-    },
-    content: {
-      class: [
-        // Spacing
-        "p-5",
-
-        // Shape
-        "rounded-tl-none rounded-tr-none rounded-br-lg rounded-bl-lg",
-        "border-t-0",
-
-        // Color
-        "bg-surface-0 dark:bg-surface-800",
-        "border border-surface-200 dark:border-surface-700",
-        "text-surface-700 dark:text-surface-0/80",
-      ],
-    },
-    transition: {
-      enterFromClass: "max-h-0",
-      enterActiveClass:
-        "overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]",
-      enterToClass: "max-h-[1000px]",
-      leaveFromClass: "max-h-[1000px]",
-      leaveActiveClass:
-        "overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]",
-      leaveToClass: "max-h-0",
-    },
-  },
-};

package/presets/Lara/autocomplete/index.js

@@ -1,284 +0,0 @@
-export default {
-  root: ({ props }) => ({
-    class: [
-      "relative",
-
-      // Flex
-      "inline-flex",
-
-      // Size
-      { "w-full": props.multiple },
-
-      // Color
-      "text-surface-900 dark:text-surface-0",
-
-      // States
-      {
-        "opacity-60 select-none pointer-events-none cursor-default":
-          props.disabled,
-      },
-    ],
-  }),
-  container: ({ props, state }) => ({
-    class: [
-      // Font
-      "font-sans text-base leading-none",
-
-      // Flex
-      "flex items-center flex-wrap",
-      "gap-2",
-
-      // Spacing
-      "m-0 list-none",
-      "px-3 py-1.5",
-
-      // Size
-      "w-full",
-      "min-h-[2.877rem]",
-
-      // Shape
-      "appearance-none rounded-md",
-
-      // Color
-      "text-surface-700 dark:text-white/80",
-      "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":
-          !props.invalid,
-      },
-      "focus:outline-none focus:outline-offset-0",
-      { "ring ring-primary-400/50 dark:ring-primary-300/50": state.focused },
-      { "ring ring-primary-400/50 dark:ring-primary-300/50": state.hovered },
-      // Transition
-      "transition duration-200 ease-in-out",
-
-      // Misc
-      "cursor-text overflow-hidden",
-    ],
-  }),
-  inputtoken: {
-    class: ["py-1.5 px-0", "inline-flex flex-auto"],
-  },
-  input: ({ props }) => ({
-    class: [
-      // Font
-      "font-sans text-base leading-none",
-
-      // Shape
-      "appearance-none rounded-md",
-      { "rounded-tr-none rounded-br-none": props.dropdown },
-      { "outline-none shadow-none rounded-none": props.multiple },
-
-      // Size
-      { "w-full": props.multiple },
-
-      // Spacing
-      "m-0",
-      { "p-3": !props.multiple, "p-0": props.multiple },
-
-      // Colors
-      "text-surface-700 dark:text-white/80",
-      "border",
-      {
-        "bg-surface-0 dark:bg-surface-900": !props.multiple,
-        " border-surface-300 dark:border-surface-700":
-          !props.multiple && !props.invalid,
-        "border-0 bg-transparent": props.multiple,
-      },
-
-      // Invalid State
-      { "border-red-500 dark:border-red-400": props.invalid },
-
-      // States
-      {
-        "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50":
-          !props.multiple,
-      },
-
-      // Transition
-      "transition-colors duration-200",
-    ],
-  }),
-  token: {
-    class: [
-      // Flex
-      "inline-flex items-center",
-
-      // Spacings
-      "py-1.5 px-3",
-
-      // Shape
-      "rounded-[1.14rem]",
-
-      // Colors
-      "bg-surface-200 dark:bg-surface-700",
-      "text-surface-700 dark:text-white/70",
-
-      // Misc
-      "cursor-default",
-    ],
-  },
-  label: {
-    class: "leading-5",
-  },
-  removeTokenIcon: {
-    class: [
-      // Shape
-      "rounded-md leading-6",
-
-      // Spacing
-      "ml-2",
-
-      // Size
-      "w-4 h-4",
-
-      // Transition
-      "transition duration-200 ease-in-out",
-
-      // Misc
-      "cursor-pointer",
-    ],
-  },
-  dropdownbutton: {
-    root: {
-      class: [
-        "relative",
-
-        // Alignments
-        "items-center inline-flex text-center align-bottom",
-
-        // Shape
-        "rounded-r-md",
-
-        // Size
-        "px-4 py-3 leading-none",
-
-        // Colors
-        "text-white dark:text-surface-900",
-        "bg-primary-500 dark:bg-primary-400",
-        "border border-primary-500 dark:border-primary-400",
-
-        // 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",
-        "focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
-      ],
-    },
-  },
-  loadingicon: {
-    class: [
-      "text-surface-500 dark:text-surface-0/70",
-      "absolute top-[50%] right-[0.5rem] -mt-2 animate-spin",
-    ],
-  },
-  panel: {
-    class: [
-      // Colors
-      "bg-surface-0 dark:bg-surface-800",
-      "text-surface-700 dark:text-white/80",
-
-      // Shape
-      "border-0",
-      "rounded-md",
-      "shadow-md",
-
-      // Size
-      "max-h-[200px] overflow-auto",
-    ],
-  },
-  list: {
-    class: "py-3 px-0 list-none m-0",
-  },
-  item: ({ context }) => ({
-    class: [
-      "relative",
-
-      // Font
-      "font-normal text-base leading-none",
-
-      // Spacing
-      "m-0 px-5 py-3",
-
-      // Shape
-      "border-0 rounded-none",
-
-      // Colors
-      {
-        "text-surface-700 dark:text-white/80":
-          !context.focused && !context.selected,
-        "bg-surface-200 dark:bg-surface-600/60":
-          context.focused && !context.selected,
-        "text-surface-700 dark:text-white/80":
-          context.focused && !context.selected,
-
-        "text-primary-700 dark:text-white/80":
-          context.focused && context.selected,
-        "bg-primary-100 dark:bg-primary-400":
-          context.focused && context.selected,
-        "text-primary-700 dark:text-white/80":
-          !context.focused && context.selected,
-        "bg-primary-50 dark:bg-primary-300":
-          !context.focused && context.selected,
-      },
-
-      // States
-      {
-        "hover:bg-surface-100 dark:hover:bg-surface-600/80":
-          !context.focused && !context.selected,
-      },
-      {
-        "hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80":
-          context.focused && !context.selected,
-      },
-
-      // Transition
-      "transition-shadow duration-200",
-
-      // Misc
-      "cursor-pointer overflow-hidden whitespace-nowrap",
-    ],
-  }),
-  itemgroup: {
-    class: [
-      "font-bold",
-
-      // Spacing
-      "m-0 p-3",
-
-      // Colors
-      "bg-surface-0 dark:bg-surface-700",
-      "text-surface-800 dark:text-white/80",
-
-      // Misc
-      "cursor-auto",
-    ],
-  },
-  emptymessage: {
-    class: [
-      // Font
-      "leading-none",
-
-      // Spacing
-      "py-3 px-5",
-
-      // Color
-      "text-surface-800 dark:text-white/80",
-      "bg-transparent",
-    ],
-  },
-  transition: {
-    enterFromClass: "opacity-0 scale-y-[0.8]",
-    enterActiveClass:
-      "transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]",
-    leaveActiveClass: "transition-opacity duration-100 ease-linear",
-    leaveToClass: "opacity-0",
-  },
-};

package/presets/Lara/avatar/index.js

@@ -1,46 +0,0 @@
-export default {
-  root: ({ props, parent }) => ({
-    class: [
-      // Font
-      {
-        "text-xl": props.size == "large",
-        "text-2xl": props.size == "xlarge",
-      },
-
-      // Alignments
-      "inline-flex items-center justify-center",
-      "relative",
-
-      // Sizes
-      {
-        "h-8 w-8": props.size == null || props.size == "normal",
-        "w-12 h-12": props.size == "large",
-        "w-16 h-16": props.size == "xlarge",
-      },
-      { "-ml-4": parent.instance.$style?.name == "avatargroup" },
-
-      // Shapes
-      {
-        "rounded-lg": props.shape == "square",
-        "rounded-full": props.shape == "circle",
-      },
-      { "border-2": parent.instance.$style?.name == "avatargroup" },
-
-      // Colors
-      "bg-surface-300 dark:bg-surface-700",
-      {
-        "border-white dark:border-surface-800":
-          parent.instance.$style?.name == "avatargroup",
-      },
-    ],
-  }),
-  image: ({ props }) => ({
-    class: [
-      "h-full w-full",
-      {
-        "rounded-lg": props.shape == "square",
-        "rounded-full": props.shape == "circle",
-      },
-    ],
-  }),
-};

package/presets/Lara/badge/index.js

@@ -1,44 +0,0 @@
-export default {
-  root: ({ props }) => ({
-    class: [
-      // Font
-      "font-bold",
-
-      {
-        "text-xs leading-[1.5rem]": props.size == null,
-        "text-lg leading-[2.25rem]": props.size == "large",
-        "text-2xl leading-[3rem]": props.size == "xlarge",
-      },
-
-      // Alignment
-      "text-center inline-block",
-
-      // Size
-      "p-0 px-1",
-      {
-        "min-w-[1.5rem] h-[1.5rem]": props.size == null,
-        "min-w-[2.25rem] h-[2.25rem]": props.size == "large",
-        "min-w-[3rem] h-[3rem]": props.size == "xlarge",
-      },
-
-      // Shape
-      {
-        "rounded-full": props.value.length == 1,
-        "rounded-[0.71rem]": props.value.length !== 1,
-      },
-
-      // Color
-      "text-white dark:text-surface-900",
-      {
-        "bg-primary-500 dark:bg-primary-400":
-          props.severity == null || props.severity == "primary",
-        "bg-surface-500 dark:bg-surface-400": props.severity == "secondary",
-        "bg-green-500 dark:bg-green-400": props.severity == "success",
-        "bg-blue-500 dark:bg-blue-400": props.severity == "info",
-        "bg-orange-500 dark:bg-orange-400": props.severity == "warning",
-        "bg-purple-500 dark:bg-purple-400": props.severity == "help",
-        "bg-red-500 dark:bg-red-400": props.severity == "danger",
-      },
-    ],
-  }),
-};

package/presets/Lara/badgedirective/index.js

@@ -1,49 +0,0 @@
-export default {
-  root: ({ context }) => ({
-    class: [
-      // Font
-      "font-bold font-sans",
-      "text-xs leading-5",
-
-      // Alignment
-      "flex items-center justify-center",
-      "text-center",
-
-      // Position
-      "absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right",
-
-      // Size
-      "m-0",
-      {
-        "p-0": context.nogutter || context.dot,
-        "px-2": !context.nogutter && !context.dot,
-        "min-w-[0.5rem] w-2 h-2": context.dot,
-        "min-w-[1.5rem] h-6": !context.dot,
-      },
-
-      // Shape
-      {
-        "rounded-full": context.nogutter || context.dot,
-        "rounded-[10px]": !context.nogutter && !context.dot,
-      },
-
-      // Color
-      "text-white dark:text-surface-900",
-      {
-        "bg-primary-500 dark:bg-primary-400":
-          !context.info &&
-          !context.success &&
-          !context.warning &&
-          !context.danger &&
-          !context.help &&
-          !context.secondary,
-        "bg-surface-500 dark:bg-surface-400": context.secondary,
-        "bg-green-500 dark:bg-green-400": context.success,
-        "bg-blue-500 dark:bg-blue-400": context.info,
-        "bg-orange-500 dark:bg-orange-400": context.warning,
-        "bg-purple-500 dark:bg-purple-400": context.help,
-        "bg-red-500 dark:bg-red-400": context.danger,
-      },
-    ],
-  }),
-};

package/presets/Lara/blockui/index.js

@@ -1,8 +0,0 @@
-export default {
-  root: {
-    class: "relative",
-  },
-  mask: {
-    class: "bg-black/40",
-  },
-};

package/presets/Lara/breadcrumb/index.js

@@ -1,64 +0,0 @@
-export default {
-  root: {
-    class: [
-      // Shape
-      "rounded-md",
-
-      // Spacing
-      "p-4",
-
-      // Color
-      "bg-surface-0 dark:bg-surface-700",
-      "border border-surface-200 dark:border-surface-700",
-
-      // Misc
-      "overflow-x-auto",
-    ],
-  },
-  menu: {
-    class: [
-      // Flex & Alignment
-      "flex items-center flex-nowrap",
-
-      // Spacing
-      "m-0 p-0 list-none leading-none",
-    ],
-  },
-  action: {
-    class: [
-      // Flex & Alignment
-      "flex items-center",
-
-      // Shape
-      "rounded-md",
-
-      // Color
-      "text-surface-600 dark:text-white/70",
-
-      // States
-      "focus-visible:outline-none focus-visible:outline-offset-0",
-      "focus-visible:ring focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50",
-
-      // Transitions
-      "transition-shadow duration-200",
-
-      // Misc
-      "text-decoration-none",
-    ],
-  },
-  icon: {
-    class: "text-surface-600 dark:text-white/70",
-  },
-  separator: {
-    class: [
-      // Flex & Alignment
-      "flex items-center",
-
-      // Spacing
-      " mx-2",
-
-      // Color
-      "text-surface-600 dark:text-white/70",
-    ],
-  },
-};