@fy-/fws-vue 0.0.947 → 0.0.949

package/components/ui/DefaultInput.vue

@@ -3,6 +3,12 @@ import { LinkIcon } from "@heroicons/vue/24/solid";
 import { computed, ref, toRef } from "vue";
 import type { ErrorObject } from "@vuelidate/core";
 import { useTranslation } from "../../composables/translations";
+import InputText from "primevue/inputtext";
+import Textarea from "primevue/textarea";
+import Calendar from "primevue/calendar";
+import Password from "primevue/password";
+import Checkbox from "primevue/checkbox";
+
 type modelValueType = string | number | string[] | number[] | undefined;
 
 type checkboxValueType = any[] | Set<any> | undefined | boolean;
@@ -91,91 +97,110 @@ defineExpose({ focus, getInputRef });
         ].includes(type)
       "
     >
-      <label
-        :for="id"
-        v-if="label"
-        class="fws-label"
-        :class="{
-          error: checkErrors,
-        }"
-      >
-        {{ label }} <span v-if="req" class="text-red-700">*</span>
-      </label>
-      <input
-        v-if="
-          [
-            'text',
-            'password',
-            'email',
-            'search',
-            'date',
-            'datetime',
-            'url',
-          ].includes(type)
-        "
-        class="fws-input"
-        :class="{
-          error: checkErrors,
-        }"
-        ref="inputRef"
-        :aria-describedby="label"
-        :autocomplete="autocomplete"
-        :id="id"
-        v-model="model"
-        :type="type"
-        :disabled="disabled"
-        :required="req"
-        :placeholder="placeholder"
-      />
-      <!-- @vue-skip -->
-      <textarea
-        :aria-describedby="label"
-        ref="inputRef"
-        v-if="type == 'textarea'"
-        class="fws-textarea"
-        :class="{
-          error: checkErrors,
-        }"
-        :autocomplete="autocomplete"
-        :id="id"
-        v-model="model"
-        :disabled="disabled"
-        :required="req"
-        :placeholder="placeholder"
-      ></textarea>
-      <select
-        :aria-describedby="label"
-        :disabled="disabled"
-        v-if="type == 'select'"
-        :required="req"
-        v-model="model"
-        :id="id"
-        ref="inputRef"
-        :class="{
-          error: checkErrors,
-        }"
-        class="fws-select"
-      >
-        <option v-for="opt in options" :value="opt[0]" :key="opt[0].toString()">
-          {{ opt[1] }}
-        </option>
-      </select>
+      <div class="flex flex-col gap-2">
+        <label :for="id" v-if="label">{{ label }}</label>
+        <!-- @vue-skip -->
+        <InputText
+          :id="id"
+          v-model="model"
+          :placeholder="placeholder"
+          :invalid="checkErrors ? true : false"
+          :aria-describedby="
+            help && !['checkbox', 'radio'].includes(type)
+              ? `${id}-help`
+              : undefined
+          "
+          v-if="
+            type == 'text' ||
+            type == 'email' ||
+            type == 'search' ||
+            type == 'url' ||
+            type == 'phone'
+          "
+        />
+        <!-- @vue-skip -->
+        <Textarea
+          :id="id"
+          v-model="model"
+          :placeholder="placeholder"
+          :invalid="checkErrors ? true : false"
+          :aria-describedby="
+            help && !['checkbox', 'radio'].includes(type)
+              ? `${id}-help`
+              : undefined
+          "
+          v-if="type == 'textarea'"
+        />
+        <!-- @vue-skip -->
+        <Calendar
+          :id="id"
+          v-model="model"
+          :placeholder="placeholder"
+          :invalid="checkErrors ? true : false"
+          showIcon
+          iconDisplay="input"
+          :aria-describedby="
+            help && !['checkbox', 'radio'].includes(type)
+              ? `${id}-help`
+              : undefined
+          "
+          v-if="type == 'date'"
+        />
+        <!-- @vue-skip -->
+        <Calendar
+          :id="id"
+          v-model="model"
+          :placeholder="placeholder"
+          :invalid="checkErrors ? true : false"
+          showTime
+          hourFormat="24"
+          showIcon
+          iconDisplay="input"
+          :aria-describedby="
+            help && !['checkbox', 'radio'].includes(type)
+              ? `${id}-help`
+              : undefined
+          "
+          v-if="type == 'datetime'"
+        />
+        <!-- @vue-skip -->
+        <Password
+          :id="id"
+          v-model="model"
+          :placeholder="placeholder"
+          :invalid="checkErrors ? true : false"
+          :aria-describedby="
+            help && !['checkbox', 'radio'].includes(type)
+              ? `${id}-help`
+              : undefined
+          "
+          toggleMask
+          v-if="type == 'password'"
+        />
+        <small
+          :id="`${id}-help`"
+          v-if="help && !['checkbox', 'radio'].includes(type)"
+        >
+          {{ help }}
+        </small>
+        <small
+          :id="`${id}-error`"
+          v-if="checkErrors"
+          class="mt-2 text-xs fws-error-text"
+        >
+          {{ checkErrors }}
+        </small>
+      </div>
     </template>
 
     <template v-if="type == 'checkbox'">
       <div class="flex items-center">
-        <input
-          :aria-describedby="label"
-          :id="id"
-          ref="inputRef"
-          :true-value="checkboxTrueValue"
-          :false-value="checkboxFalseValue"
+        <Checkbox
           v-model="modelCheckbox"
-          type="checkbox"
-          value=""
-          :checked="modelCheckbox"
-          class="w-4 h-4 mr-2 text-fv-primary-600 bg-fv-neutral-100 border-fv-neutral-300 rounded focus:ring-fv-primary-500 dark:focus:ring-fv-primary-600 dark:ring-offset-fv-neutral-800 focus:ring-2 dark:bg-fv-neutral-700 dark:border-fv-neutral-600"
+          :binary="true"
+          :aria-describedby="label"
         />
+
         <label
           :for="id"
           v-if="label"

package/env.d.ts

@@ -4,3 +4,5 @@ declare module "*.vue" {
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }
+
+declare module "./presets/Wind";

package/index.ts

@@ -49,6 +49,10 @@ import FilterData from "./components/fws/FilterData.vue";
 import CmsArticleBoxed from "./components/fws/CmsArticleBoxed.vue";
 import CmsArticleSingle from "./components/fws/CmsArticleSingle.vue";
 
+// Primevue
+import Wind from "./presets/Wind";
+
+// Css
 import "./style.css";
 
 function createFWS(): Plugin {
@@ -92,6 +96,9 @@ declare module "vue" {
   }
 }
 
+const Primevue = {
+  Wind: Wind,
+};
 export {
   i18nextPromise,
   useTranslation,
@@ -133,4 +140,7 @@ export {
   FilterData,
   CmsArticleBoxed,
   CmsArticleSingle,
+
+  // Primevue
+  Primevue,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "0.0.947",
+  "version": "0.0.949",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "repository": {
@@ -37,9 +37,7 @@
     "pinia": "2.x.x",
     "timeago.js": "^4.0.x",
     "vue": "^3.3.x",
-    "vue-router": "^4.1.x"
-  },
-  "dependencies": {
-    "timeago.js": "^4.0.2"
+    "vue-router": "^4.1.x",
+    "primevue": "^3.5.x"
   }
 }

package/presets/Wind/accordion/index.js

@@ -0,0 +1,75 @@
+export default {
+  accordiontab: {
+    header: ({ props }) => ({
+      class: [
+        // Sizing
+        "pt-6 pb-0",
+        "mt-6",
+
+        // Shape
+        "border-x-0 border-b-0",
+
+        // Color
+        "border border-surface-200 dark:border-surface-700",
+
+        // State
+        {
+          "select-none pointer-events-none cursor-default opacity-60":
+            props?.disabled,
+        },
+      ],
+    }),
+    headerAction: ({ context }) => ({
+      class: [
+        //Font
+        "font-semibold",
+        "leading-7",
+
+        // Alignments
+        "flex items-center justify-between flex-row-reverse",
+        "relative",
+
+        // Shape
+        "rounded-md",
+
+        // Color
+        "bg-transparent",
+        "text-surface-900 dark:text-surface-0",
+
+        // States
+        "focus:outline-none focus:outline-offset-0 focus-visible:ring-2 focus-visible:ring-primary-600 ring-inset dark:focus-visible:ring-primary-500", // Focus
+
+        // Misc
+        "cursor-pointer no-underline select-none",
+      ],
+    }),
+    headerIcon: {
+      class: "inline-block ml-2",
+    },
+    headerTitle: {
+      class: "leading-7",
+    },
+    content: {
+      class: [
+        // Font
+        "leading-7",
+
+        // Spacing
+        "pr-12 pt-2",
+
+        // Color
+        "text-surface-600 dark:text-surface-0/70",
+      ],
+    },
+    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/Wind/autocomplete/index.js

@@ -0,0 +1,294 @@
+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 sm:text-sm leading-none",
+
+      // Flex
+      "flex items-center flex-wrap",
+      "gap-1",
+
+      // Spacing
+      "m-0 list-none",
+      "px-3 py-1",
+      { "px-3 py-1.5": !props.multiple, "px-3 py-1": props.multiple },
+      // Size
+      "w-full",
+
+      // Shape
+      "appearance-none rounded-md",
+
+      // Color
+      "text-surface-900 dark:text-surface-0",
+      "bg-surface-0 dark:bg-surface-900",
+      "placeholder:text-surface-400 dark:placeholder:text-surface-500",
+      "shadow-sm",
+
+      // States
+      "focus:outline-none focus:outline-offset-0",
+      // States
+      {
+        "ring-1 ring-inset": !state.focused,
+        "ring-2 ring-inset ring-primary-500 dark:ring-primary-400":
+          state.focused,
+      },
+
+      {
+        "ring-surface-300 dark:ring-surface-600":
+          !props.invalid && !state.focused,
+      },
+
+      // Invalid State
+      { "ring-red-500 dark:ring-red-400": props.invalid && !state.focused },
+
+      // Transition
+      "transition duration-200 ease-in-out",
+
+      // Misc
+      "cursor-text overflow-hidden",
+    ],
+  }),
+  inputtoken: ({ props }) => ({
+    class: [
+      { "py-1.5 px-0": !props.multiple, "p-0.5": props.multiple },
+      ,
+      "inline-flex flex-auto",
+    ],
+  }),
+  input: ({ props }) => ({
+    class: [
+      // Font
+      "font-sans sm:text-sm 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",
+      { "py-1.5 px-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-inset focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400":
+          !props.multiple,
+      },
+
+      // Transition
+      "transition-colors duration-200",
+    ],
+  }),
+  token: {
+    class: [
+      // Flexbox
+      "inline-flex items-center",
+
+      // Spacing
+      "py-0.5 px-3",
+
+      // Shape
+      "rounded-[1.14rem]",
+
+      // Colors
+      "text-surface-700 dark:text-white/70",
+      "bg-surface-200 dark:bg-surface-700",
+    ],
+  },
+  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 text-sm leading-none",
+
+        // Alignments
+        "items-center inline-flex text-center align-bottom",
+
+        // Shape
+        "rounded-r-md",
+
+        // Size
+        "px-2.5 py-1.5",
+        "-ml-px",
+
+        // Colors
+        "text-surface-600 dark:text-surface-100",
+        "bg-surface-100 dark:bg-surface-800",
+        "ring-1 ring-inset ring-surface-300 dark:ring-surface-700",
+
+        // States
+        "hover:bg-surface-200 dark:hover:bg-surface-700",
+        "focus:outline-none focus:outline-offset-0 focus:ring-1",
+        "focus:ring-primary-500 dark:focus:ring-primary-400",
+      ],
+    },
+  },
+  loadingicon: {
+    class: [
+      "text-sm leading-none text-surface-500 dark:text-surface-0/70",
+      "absolute top-[50%] right-[0.5rem] -mt-2 animate-spin",
+    ],
+  },
+  panel: {
+    class: [
+      // Position
+      "absolute top-0 left-0",
+      "mt-2",
+
+      // Shape
+      "border-0",
+      "rounded-md",
+      "shadow-md",
+      "max-h-[15rem]",
+      "overflow-auto",
+
+      // Color
+      "bg-surface-0 dark:bg-surface-800",
+      "text-surface-800 dark:text-white/80",
+      "ring-1 ring-inset ring-surface-300 dark:ring-surface-700",
+    ],
+  },
+  list: {
+    class: "py-1 list-none m-0",
+  },
+  item: ({ context }) => ({
+    class: [
+      // Font
+      "sm:text-sm",
+      "leading-none",
+      { "font-normal": !context.selected, "font-bold": context.selected },
+
+      // Position
+      "relative",
+
+      // Shape
+      "border-0",
+      "rounded-none",
+
+      // Spacing
+      "m-0",
+      "py-2 px-4",
+
+      // Color
+      {
+        "text-surface-700 dark:text-white/80":
+          !context.focused && !context.selected,
+      },
+      {
+        "bg-surface-200 dark:bg-surface-600/60 text-surface-700 dark:text-white/80":
+          context.focused && !context.selected,
+      },
+      {
+        "bg-primary-500 dark:bg-primary-400 text-white dark:text-surface-700":
+          context.focused && context.selected,
+      },
+      {
+        "bg-transparent text-surface-700 dark:text-white/80":
+          !context.focused && context.selected,
+      },
+
+      //States
+      "hover:bg-primary-500 dark:hover:bg-primary-400 hover:text-white dark:hover:text-surface-700",
+
+      // Misc
+      "cursor-pointer",
+      "overflow-hidden",
+      "whitespace-nowrap",
+    ],
+  }),
+  itemgroup: {
+    class: [
+      //Font
+      "font-bold",
+      "sm:text-sm",
+
+      // Spacing
+      "m-0",
+      "py-2 px-4",
+
+      // Color
+      "text-surface-800 dark:text-white/80",
+      "bg-surface-0 dark:bg-surface-600/80",
+
+      // Misc
+      "cursor-auto",
+    ],
+  },
+  emptymessage: {
+    class: [
+      // Font
+      "leading-none",
+      "sm:text-sm",
+
+      // Spacing
+      "py-2 px-4",
+
+      // 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/Wind/avatar/index.js

@@ -0,0 +1,48 @@
+export default {
+  root: ({ props, parent }) => ({
+    class: [
+      // Font
+      {
+        "text-sm": props.size == null || props.size == "normal",
+        "text-lg": props.size == "large",
+        "text-xl": props.size == "xlarge",
+      },
+
+      // Alignments
+      "inline-flex items-center justify-center",
+      "shrink-0",
+      "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-100 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",
+      },
+    ],
+  }),
+};