vueless 0.0.488 → 0.0.490

package/ui.form-date-picker/storybook/stories.ts

@@ -0,0 +1,200 @@
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybook.ts";
+
+import UDatePicker from "../../ui.form-date-picker/UDatePicker.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import URow from "../../ui.container-row/URow.vue";
+
+import type { UDatePickerProps } from "../types.ts";
+
+interface DefaultUDatePickerArgs extends UDatePickerProps {
+  slotTemplate?: string;
+}
+
+interface EnumUDatePickerArgs extends UDatePickerProps {
+  slotTemplate?: string;
+  enum: "size";
+}
+
+/**
+ * The `UDatePicker` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-date-picker)
+ */
+export default {
+  id: "3170",
+  title: "Form Inputs & Controls / Date Picker",
+  component: UDatePicker,
+  args: {
+    label: "Label",
+    modelValue: null,
+  },
+  argTypes: {
+    ...getArgTypes(UDatePicker.__name),
+  },
+  parameters: {
+    docs: {
+      story: {
+        height: "480px",
+      },
+    },
+  },
+} as Meta;
+
+const DefaultTemplate: StoryFn<DefaultUDatePickerArgs> = (args: DefaultUDatePickerArgs) => ({
+  components: { UDatePicker, UIcon },
+  setup() {
+    const slots = getSlotNames(UDatePicker.__name);
+
+    return { args, slots };
+  },
+  template: `
+    <UDatePicker open-direction-y="bottom" v-bind="args" v-model="args.modelValue">
+      ${args.slotTemplate || getSlotsFragment("")}
+    </UDatePicker>
+
+    <div class="mt-4">
+      {{ args.modelValue }}
+    </div>
+  `,
+});
+
+const EnumVariantTemplate: StoryFn<EnumUDatePickerArgs> = (
+  args: EnumUDatePickerArgs,
+  { argTypes },
+) => ({
+  components: { UDatePicker, URow },
+  setup() {
+    return {
+      args,
+      options: argTypes?.[args.enum]?.options,
+    };
+  },
+  template: `
+    <URow>
+      <UDatePicker
+        v-for="(option, index) in options"
+        open-direction-y="bottom"
+        :key="index"
+        v-bind="args"
+        :[args.enum]="option"
+        :label="option"
+      />
+    </URow>
+  `,
+});
+
+const OpenDirectionTemplate: StoryFn<DefaultUDatePickerArgs> = (args: DefaultUDatePickerArgs) => ({
+  components: { UDatePicker, URow },
+  setup() {
+    return {
+      args,
+    };
+  },
+  template: `
+    <URow class="!flex-col">
+      <UDatePicker
+        class="w-full"
+        open-direction-y="top"
+        open-direction-x="left"
+        v-bind="args"
+        v-model="args.modelValue"
+        label="Top Left"
+      />
+      <UDatePicker
+        class="w-full"
+        open-direction-y="top"
+        open-direction-x="right"
+        v-bind="args"
+        v-model="args.modelValue"
+        label="Top Right"
+      />
+      <UDatePicker
+        class="w-full"
+        open-direction-y="bottom"
+        open-direction-x="left"
+        v-bind="args"
+        v-model="args.modelValue"
+        label="Bottom Left"
+      />
+      <UDatePicker
+        class="w-full"
+        open-direction-y="bottom"
+        open-direction-x="right"
+        v-bind="args"
+        v-model="args.modelValue"
+        label="Bottom Right"
+      />
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = { modelValue: new Date() };
+
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size", label: "" };
+
+export const OpenDirection = OpenDirectionTemplate.bind({});
+OpenDirection.args = {};
+
+export const Description = DefaultTemplate.bind({});
+Description.args = { description: "some description" };
+
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = { disabled: true };
+
+export const Error = DefaultTemplate.bind({});
+Error.args = { error: "some error" };
+
+export const Placeholder = DefaultTemplate.bind({});
+Placeholder.args = { placeholder: "some placeholder" };
+
+export const DateFormat = DefaultTemplate.bind({});
+DateFormat.args = { dateFormat: "d.m.Y", userDateFormat: "d.m.Y", modelValue: "28.06.2024" };
+
+export const Timepicker = DefaultTemplate.bind({});
+Timepicker.args = {
+  timepicker: true,
+  modelValue: new Date(2024, 2, 14, 12, 24, 14),
+  userDateFormat: "j F, Y - H:i:S",
+};
+
+export const MinMax = DefaultTemplate.bind({});
+MinMax.args = {
+  minDate: new Date(2022, 2, 22),
+  maxDate: new Date(2022, 2, 26),
+  modelValue: new Date(2022, 2, 24),
+};
+
+export const LeftIcon = DefaultTemplate.bind({});
+LeftIcon.args = {
+  leftIcon: "star",
+};
+
+export const RightIcon = DefaultTemplate.bind({});
+RightIcon.args = {
+  rightIcon: "star",
+};
+
+export const LeftIconSlot = DefaultTemplate.bind({});
+LeftIconSlot.args = {
+  slotTemplate: `
+    <template #left-icon>
+      <UIcon
+        name="archive"
+        color="red"
+      />
+    </template>
+  `,
+};
+
+export const RightIconSlot = DefaultTemplate.bind({});
+RightIconSlot.args = {
+  slotTemplate: `
+    <template #right-icon>
+      <UIcon
+        name="archive"
+        color="red"
+      />
+    </template>
+  `,
+};

package/ui.form-date-picker/types.ts

@@ -0,0 +1,119 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UDatePickerProps {
+  /**
+   * Calendar value (JavaScript Date object or string formatted in given `dateFormat` or object when `range` enabled).
+   */
+  modelValue: Date | string;
+
+  /**
+   * Datepicker label.
+   */
+  label?: string;
+
+  /**
+   * Datepicker label placement.
+   * @values top, topInside, topWithDesc, left, right
+   */
+  labelAlign?: "top" | "topInside" | "topWithDesc" | "left" | "right";
+
+  /**
+   * Datepicker placeholder.
+   */
+  placeholder?: string;
+
+  /**
+   * Datepicker description.
+   */
+  description?: string;
+
+  /**
+   * Datepicker error message.
+   */
+  error?: string;
+
+  /**
+   * Datepicker size.
+   * @values sm, md, lg
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Datepicker open direction on x-axis.
+   * @values auto, left, right
+   */
+  openDirectionX?: "auto" | "left" | "right";
+
+  /**
+   * Datepicker open direction on y-axis.
+   * @values auto, top, bottom
+   */
+  openDirectionY?: "auto" | "top" | "bottom";
+
+  /**
+   * Show timepicker.
+   */
+  timepicker?: boolean;
+
+  /**
+   * Date string format.
+   */
+  dateFormat?: string | undefined;
+
+  /**
+   * Same as date format, but used when timepicker is enabled.
+   */
+  dateTimeFormat?: string;
+
+  /**
+   * User-friendly date format (it will be shown in UI).
+   */
+  userDateFormat?: string;
+
+  /**
+   * Same as user format, but used when timepicker is enabled.
+   */
+  userDateTimeFormat?: string;
+
+  /**
+   * Min date (JavaScript Date object or string formatted in given `dateFormat`).
+   */
+  minDate?: string | Date | undefined;
+
+  /**
+   * Max date (JavaScript Date object or string formatted in given `dateFormat`).
+   */
+  maxDate?: string | Date | undefined;
+
+  /**
+   * Left icon name.
+   */
+  leftIcon?: string;
+
+  /**
+   * Right icon name.
+   */
+  rightIcon?: string;
+
+  /**
+   * Make datepicker disabled.
+   */
+  disabled?: boolean;
+
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: Config;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.form-date-picker/useAttrs.ts

@@ -0,0 +1,47 @@
+import { computed, watchEffect, type Ref } from "vue";
+import { merge } from "lodash-es";
+import useUI from "../composables/useUI.ts";
+
+import defaultConfig from "./config.ts";
+import { Direction } from "../composables/useAutoPosition.ts";
+
+import type { UseAttrs } from "../types.ts";
+import type { UDatePickerProps, Config } from "./types.ts";
+import type { Config as UCalendarConfig } from "../ui.form-calendar/types.ts";
+
+interface DatePickerState {
+  isTop: Ref<boolean>;
+  isRight: Ref<boolean>;
+}
+
+export default function useAttrs(
+  props: UDatePickerProps,
+  { isTop, isRight }: DatePickerState,
+): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+
+  const mutatedProps = computed(() => ({
+    openDirectionY: isTop.value ? Direction.Top : Direction.Bottom,
+    openDirectionX: isRight.value ? Direction.Right : Direction.Left,
+    error: Boolean(props.error),
+    description: Boolean(props.description),
+  }));
+
+  const keysAttrs = getKeysAttrs(mutatedProps);
+
+  /* Merging DatePicker's i18n translations into Calendar's i18n translations. */
+  watchEffect(() => {
+    const calendarAttrs = keysAttrs.calendarAttrs as Ref<{ config: UCalendarConfig }>;
+    const calendarConfig = calendarAttrs.value.config || {};
+
+    if (!calendarConfig.i18n || props.config?.i18n) {
+      calendarAttrs.value.config.i18n = merge(calendarConfig.i18n, config.value.i18n);
+    }
+  });
+
+  return {
+    config,
+    ...keysAttrs,
+    hasSlotContent,
+  };
+}

package/ui.image-icon/UIcon.vue

@@ -127,21 +127,12 @@ const emit = defineEmits([
 const { config, iconAttrs } = useAttrs(props);
 
 const generatedIcons = computed(() => {
-  /**
-   * Use nuxt assets folders to include icons in final build.
-   * TODO: Find another way to include icons in build
-   */
-  if (isSSR) {
-    return (
-      Object.entries(
-        import.meta.glob(`/assets/.vueless/icons/**/*.svg`, { eager: true, query: "?component" }),
-      ) || []
-    );
-  }
-
   return (
     Object.entries(
-      import.meta.glob(`../assets/icons/**/*.svg`, { eager: true, query: "?component" }),
+      import.meta.glob(`/node_modules/.cache/vueless/assets/icons/**/*.svg`, {
+        eager: true,
+        query: "?component",
+      }),
     ) || []
   );
 });
@@ -185,8 +176,8 @@ const dynamicComponent = computed(() => {
       return import.meta.env.PROD
         ? await getIcon([name])
         : isSSR
-          ? import(/* @vite-ignore */ `node_modules/vueless/assets/icons/${name}.svg?component`)
-          : import(/* @vite-ignore */ `../assets/icons/${name}.svg?component`);
+          ? import(/* @vite-ignore */ `node_modules/.cache/vueless/assets/icons/${name}.svg?component`)
+          : import(/* @vite-ignore */ `/node_modules/.cache/vueless/assets/icons/${name}.svg?component`);
     },
     "@material-symbols": async () => {
       return import.meta.env.PROD

package/ui.loader/ULoader.vue

@@ -50,43 +50,41 @@ const { loaderAttrs, ellipseAttrs, config } = useAttrs(props);
 </script>
 
 <style scoped lang="postcss">
-.vueless-loader-ellipse {
-  &:nth-child(1) {
-    animation: ellipse-1 0.6s infinite;
-  }
+.vueless-loader-ellipse:nth-child(1) {
+  animation: ellipse-1 0.6s infinite;
+}
 
-  &:nth-child(4) {
-    animation: ellipse-3 0.6s infinite;
-  }
+.vueless-loader-ellipse:nth-child(4) {
+  animation: ellipse-3 0.6s infinite;
+}
 
-  &-sm {
-    &:nth-child(2) {
-      animation: ellipse-2-sm 0.6s infinite;
-    }
+.vueless-loader-ellipse-sm {
+  &:nth-child(2) {
+    animation: ellipse-2-sm 0.6s infinite;
+  }
 
-    &:nth-child(3) {
-      animation: ellipse-2-sm 0.6s infinite;
-    }
+  &:nth-child(3) {
+    animation: ellipse-2-sm 0.6s infinite;
   }
+}
 
-  &-md {
-    &:nth-child(2) {
-      animation: ellipse-2-md 0.6s infinite;
-    }
+.vueless-loader-ellipse-md {
+  &:nth-child(2) {
+    animation: ellipse-2-md 0.6s infinite;
+  }
 
-    &:nth-child(3) {
-      animation: ellipse-2-md 0.6s infinite;
-    }
+  &:nth-child(3) {
+    animation: ellipse-2-md 0.6s infinite;
   }
+}
 
-  &-lg {
-    &:nth-child(2) {
-      animation: ellipse-2-lg 0.6s infinite;
-    }
+.vueless-loader-ellipse-lg {
+  &:nth-child(2) {
+    animation: ellipse-2-lg 0.6s infinite;
+  }
 
-    &:nth-child(3) {
-      animation: ellipse-2-lg 0.6s infinite;
-    }
+  &:nth-child(3) {
+    animation: ellipse-2-lg 0.6s infinite;
   }
 }
 

package/utils/node/loaderIcon.js

@@ -18,8 +18,8 @@ import { getDirFiles, getDefaultConfigJson, merge } from "./helper.js";
 import { CACHE_PATH, VUELESS_CONFIG_FILE_NAME } from "../../constants.js";
 
 const ICONS_DIR = "assets/icons";
-const NUXT_ASSETS_DIR = path.join(process.cwd(), "assets/.vueless/icons");
-const DEFAULT_ICONS_DIR = path.join(process.cwd(), `src/${ICONS_DIR}`);
+const DEFAULT_ICONS_DIR = path.join(process.cwd(), `node_modules/vueless/${ICONS_DIR}`);
+const DEFAULT_ICONS_LOCAL_DIR = path.join(process.cwd(), `src/${ICONS_DIR}`);
 const CACHED_ICONS_DIR = path.join(process.cwd(), `${CACHE_PATH}/${ICONS_DIR}`);
 const ICON_CONFIG_PATH = "ui.image-icon/config.ts";
 const ICON_COMPONENT_NAME = "UIcon";
@@ -33,21 +33,31 @@ let isVuelessIconsMode = false;
 let cachedIconsDir = CACHED_ICONS_DIR;
 
 // perform icons copy magick... ✨
-export async function copyIcons({ mode = "", env, debug, targetFiles = [], isNuxt } = {}) {
+export async function copyIcons({ mode = "", env, debug, targetFiles = [] } = {}) {
   isDebug = debug || false;
   isVuelessEnv = env === "vueless";
   isDefaultMode = mode === "";
   isStorybookMode = mode === "storybook";
   isVuelessIconsMode = mode === "vuelessIcons";
 
-  if (isVuelessIconsMode && isVuelessEnv) cachedIconsDir = DEFAULT_ICONS_DIR;
+  /* Copy icons which using in vueless components to the cache (vueless env only). */
+  if (isVuelessEnv && fs.existsSync(DEFAULT_ICONS_LOCAL_DIR)) {
+    await cp(DEFAULT_ICONS_LOCAL_DIR, CACHED_ICONS_DIR, { recursive: true });
+  }
+
+  /* Copy icons which using in vueless components to the cache. */
+  if (!isVuelessEnv && fs.existsSync(DEFAULT_ICONS_DIR)) {
+    await cp(DEFAULT_ICONS_DIR, CACHED_ICONS_DIR, { recursive: true });
+  }
+
+  if (isVuelessIconsMode && isVuelessEnv) cachedIconsDir = DEFAULT_ICONS_LOCAL_DIR;
   if (isStorybookMode && isVuelessEnv) cachedIconsDir = CACHED_ICONS_DIR;
 
   if (isStorybookMode) {
     const storybookStoriesJs = await getDirFiles("src", STORYBOOK_STORY_EXTENSIONS[0]);
     const storybookStoriesTs = await getDirFiles("src", STORYBOOK_STORY_EXTENSIONS[1]);
 
-    findAndCopyIcons([...storybookStoriesJs.flat(), ...storybookStoriesTs.flat()]);
+    findAndCopyIcons([...storybookStoriesJs, ...storybookStoriesTs]);
   }
 
   if (isVuelessIconsMode || isDefaultMode || isStorybookMode) {
@@ -69,23 +79,13 @@ export async function copyIcons({ mode = "", env, debug, targetFiles = [], isNux
       `${VUELESS_CONFIG_FILE_NAME}.ts`,
     ]);
   }
-
-  if (isNuxt) {
-    await cp(CACHED_ICONS_DIR, NUXT_ASSETS_DIR, {
-      recursive: true,
-    });
-  }
 }
 
-export async function removeIcons({ debug, isNuxt }) {
+export async function removeIcons({ debug }) {
   if (!fs.existsSync(cachedIconsDir)) return;
 
   await rm(cachedIconsDir, { recursive: true, force: true });
 
-  if (isNuxt) {
-    await rm(NUXT_ASSETS_DIR, { recursive: true, force: true });
-  }
-
   if (debug) {
     console.log("Dynamically copied icons was successfully removed.");
   }
@@ -166,6 +166,13 @@ function findAndCopyIcons(files) {
   function copyFile(name) {
     name = name.toLowerCase();
 
+    const iconNameRegex = /^[a-z0-9_-]+$/;
+
+    /* Filter irrelevant icon name cases. */
+    if (!iconNameRegex.test(name)) {
+      return;
+    }
+
     const library = defaults.library;
     const weight = defaults.weight;
     const style = defaults.style;