vueless 0.0.3 → 0.0.4

package/composable.ui/index.js

@@ -1,392 +0,0 @@
-import {
-  ref,
-  watchEffect,
-  getCurrentInstance,
-  toValue,
-  useAttrs,
-  Comment,
-  Text,
-  Fragment,
-} from "vue";
-import { cx, globalComponentConfig, strategy } from "vueless/service.ui";
-
-const strategyType = {
-  merge: "merge",
-  replace: "replace",
-  overwrite: "overwrite",
-};
-
-/**
-  Merging component configs in a given sequence (bigger number = bigger priority):
-  1. Default component config
-  2. Custom global component config (/vueless.config.js)
-  3. Component config (:config="{...}" props)
-  4. Component classes (class="...")
- */
-export default function useUI(defaultConfig = {}, propsConfigGetter = null, topLevelClassKey) {
-  const { name: componentName } = getCurrentInstance().type;
-  const globalConfig = globalComponentConfig[componentName];
-
-  const isStrategyValid = strategy && Object.values(strategyType).includes(strategy);
-  const vuelessStrategy = isStrategyValid ? strategy : strategyType.merge;
-
-  const [firstClassKey] = Object.keys(defaultConfig);
-  const config = ref({});
-  const attrs = useAttrs();
-
-  watchEffect(() => {
-    const propsConfig = propsConfigGetter && propsConfigGetter();
-
-    const mergedConfig = getMergedConfig({
-      defaultConfig,
-      globalConfig,
-      propsConfig,
-      vuelessStrategy,
-    });
-
-    config.value = mergeClassesIntoConfig(mergedConfig, topLevelClassKey || firstClassKey, attrs);
-  });
-
-  function getAttrs(configKey, options) {
-    const cvaClasses = options?.classes || "";
-    const isComponent = options?.isComponent;
-
-    const attrs = useAttrs();
-    const isDev = import.meta.env.DEV;
-    const vuelessAttrs = ref({});
-
-    const commonAttrs = {
-      ...attrs,
-      component: isDev && (attrs.component || componentName || null),
-      "config-key": isDev && (attrs["config-key"] || configKey || null),
-      "child-component": isDev && attrs.component ? componentName : null,
-      "child-config-key": isDev && attrs.component ? configKey : null,
-    };
-
-    watchEffect(() => {
-      const configKeyValue = config.value[configKey];
-      const isObject = typeof configKeyValue === "object";
-
-      const configAttrs = {
-        config: configKeyValue,
-        ...configKeyValue?.defaultVariants,
-      };
-
-      const isTopLevelClassKey = configKey === (topLevelClassKey || firstClassKey);
-
-      const attrClass = isTopLevelClassKey && !isComponent ? attrs.class : "";
-      const configKeyClass = isObject ? configKeyValue.base : configKeyValue;
-
-      vuelessAttrs.value = {
-        ...commonAttrs,
-        class: cx([configKeyClass, toValue(cvaClasses), attrClass]),
-        ...((isObject && configAttrs) || {}),
-      };
-    });
-
-    return vuelessAttrs;
-  }
-
-  return {
-    config,
-    getAttrs,
-    setColor,
-    hasSlotContent,
-  };
-}
-
-/**
-  Get merged config based on config merging strategy.
-  @param {Object} defaultConfig
-  @param {Object} globalConfig
-  @param {Object} propsConfig
-  @param {string} vuelessStrategy - vueless top level merge strategy.
-
-  @returns {Object}
- */
-function getMergedConfig({ defaultConfig, globalConfig, propsConfig, vuelessStrategy }) {
-  defaultConfig = cloneDeep(defaultConfig);
-
-  const strategy =
-    !globalConfig && !propsConfig
-      ? strategyType.merge
-      : propsConfig?.strategy || globalConfig?.strategy || vuelessStrategy;
-
-  if (strategy === strategyType.merge) {
-    return mergeConfigs({ defaultConfig, globalConfig, propsConfig });
-  }
-
-  if (strategy === strategyType.replace) {
-    return mergeConfigs({ defaultConfig, globalConfig, propsConfig, isReplace: true });
-  }
-
-  if (strategy === strategyType.overwrite) {
-    const isGlobalConfig = globalConfig && Object.keys(globalConfig).length;
-    const isPropsConfig = propsConfig && Object.keys(propsConfig).length;
-
-    return isPropsConfig ? propsConfig : isGlobalConfig ? globalConfig : defaultConfig;
-  }
-}
-
-/**
-  Recursively merge config objects with removing tailwind classes duplicates.
-  @param {Object} defaultConfig
-  @param {Object} globalConfig
-  @param {Object} propsConfig
-  @param {Object} config - final merged config.
-  @param {boolean} isReplace - enables class replacement instead of merge.
-
-  @returns {Object}
- */
-function mergeConfigs({
-  defaultConfig,
-  globalConfig,
-  propsConfig,
-  config = {},
-  isReplace = false,
-}) {
-  globalConfig = globalConfig || {};
-  propsConfig = propsConfig || {};
-
-  const isGlobalConfig = Object.keys(globalConfig).length;
-  const isPropsConfig = Object.keys(propsConfig).length;
-
-  // Add unique keys from defaultConfig to composedConfig
-  let composedConfig = cloneDeep(defaultConfig);
-
-  // Add unique keys from globalConfig to composedConfig
-  for (let key in globalConfig) {
-    if (!Object.keys(composedConfig).includes(key)) {
-      composedConfig[key] = globalConfig[key];
-    }
-  }
-
-  // Add unique keys from propsConfig to composedConfig
-  for (let key in propsConfig) {
-    if (!Object.keys(composedConfig).includes(key)) {
-      composedConfig[key] = propsConfig[key];
-    }
-  }
-
-  for (let key in composedConfig) {
-    if (isGlobalConfig || isPropsConfig) {
-      if (key === "strategy") {
-        config[key] = propsConfig[key] || globalConfig[key] || defaultConfig[key];
-      } else if (key === "defaultVariants") {
-        config[key] = { ...defaultConfig[key], ...globalConfig[key], ...propsConfig[key] };
-      } else if (key === "compoundVariants") {
-        config[key] = mergeCompoundVariants({
-          defaultConfig: composedConfig,
-          globalConfig,
-          propsConfig,
-          isReplace,
-          key,
-        });
-      } else {
-        const isObjectComposedConfig = typeof composedConfig[key] === "object";
-        const isObjectGlobalConfig = typeof globalConfig[key] === "object";
-        const isObjectPropsConfig = typeof propsConfig[key] === "object";
-
-        const isObject = isObjectComposedConfig || isObjectGlobalConfig || isObjectPropsConfig;
-        const isEmpty = composedConfig[key] === null;
-        const isIconName = /^.*(iconName|IconName)$/.test(key);
-        const isI18n = key === "i18n";
-
-        config[key] =
-          isObject && !isEmpty && !isI18n
-            ? mergeConfigs({
-                defaultConfig: stringToObject(composedConfig[key]),
-                globalConfig: stringToObject(globalConfig[key]),
-                propsConfig: stringToObject(propsConfig[key]),
-                config: stringToObject(composedConfig[key]),
-                isReplace,
-              })
-            : isReplace || isIconName || isI18n
-              ? propsConfig[key] || globalConfig[key] || defaultConfig[key]
-              : cx([defaultConfig[key], globalConfig[key], propsConfig[key]]);
-      }
-    } else {
-      config[key] = composedConfig[key];
-    }
-  }
-
-  return config;
-}
-
-/**
-  Turn simplified nested component config to regular config.
-  @param {Object | String} value
-  @returns {Object}
- */
-function stringToObject(value) {
-  return typeof value === "object" ? value : { base: value };
-}
-
-/**
-  Merge CVA compound variants arrays.
-  @param {Object} defaultConfig
-  @param {Object} globalConfig
-  @param {Object} propsConfig
-  @param {string} key
-  @param {boolean} isReplace - enables class replacement instead of merge.
-
-  @returns {Array}
- */
-function mergeCompoundVariants({ defaultConfig, globalConfig, propsConfig, key, isReplace }) {
-  if (
-    (globalConfig[key] && !Array.isArray(globalConfig[key])) ||
-    (propsConfig[key] && !Array.isArray(propsConfig[key])) ||
-    (defaultConfig[key] && !Array.isArray(defaultConfig[key]))
-  ) {
-    // eslint-disable-next-line no-console
-    console.error("CompoundVariants should be an array.");
-  }
-
-  let globalConfigUniqueItems = cloneDeep(globalConfig[key] || []);
-  let propsConfigUniqueItems = cloneDeep(propsConfig[key] || []);
-
-  const config = defaultConfig[key].map((defaultConfigItem) => {
-    /**
-     Compare two objects by keys for match.
-     @param {Object} configItem
-     @returns {Boolean}
-     */
-    function isSameItem(configItem) {
-      const hasConfigItemKeys = Object.keys(defaultConfigItem)
-        .map((key) => defaultConfigItem[key] === configItem[key] || key === "class")
-        .every((item) => !!item);
-
-      const hasDefaultConfigItemKeys = Object.keys(configItem)
-        .map((key) => defaultConfigItem[key] === configItem[key] || key === "class")
-        .every((item) => !!item);
-
-      return hasConfigItemKeys && hasDefaultConfigItemKeys;
-    }
-
-    /**
-     Find the same compound variant item in custom config if exist.
-     @param {Object} config
-     @returns {Object|undefined}
-     */
-    function findItem(config = []) {
-      const globalConfigUniqueItemIndex = globalConfigUniqueItems.findIndex(isSameItem);
-      const propsConfigUniqueItemIndex = propsConfigUniqueItems.findIndex(isSameItem);
-
-      if (~globalConfigUniqueItemIndex) {
-        globalConfigUniqueItems.splice(globalConfigUniqueItemIndex, 1);
-      }
-
-      if (~propsConfigUniqueItemIndex) {
-        propsConfigUniqueItems.splice(propsConfigUniqueItemIndex, 1);
-      }
-
-      return config.find(isSameItem);
-    }
-
-    const globalConfigItem = findItem(globalConfig[key]);
-    const propsConfigItem = findItem(propsConfig[key]);
-
-    return globalConfigItem || propsConfigItem
-      ? {
-          ...defaultConfigItem,
-          class: isReplace
-            ? propsConfigItem?.class || globalConfigItem?.class || defaultConfigItem.class
-            : cx([defaultConfigItem.class, globalConfigItem?.class, propsConfigItem?.class]),
-        }
-      : defaultConfigItem;
-  });
-
-  return [...config, ...globalConfigUniqueItems, ...propsConfigUniqueItems];
-}
-
-/**
-  Merge component classes from "class" attribute into final config.
-  @param {Object} config
-  @param {Object} attrs
-  @param {string} topLevelClassKey
-
-  @returns {Object}
- */
-function mergeClassesIntoConfig(config, topLevelClassKey, attrs) {
-  if (typeof config[topLevelClassKey] === "object") {
-    config[topLevelClassKey].base = cx([config[topLevelClassKey]?.base, attrs.class]);
-  } else {
-    config[topLevelClassKey] = cx([config[topLevelClassKey], attrs.class]);
-  }
-
-  return config;
-}
-
-/**
-  Check if slot defined, and have a content.
-  @param slot
-  @param props
-
-  @returns {boolean}
- */
-function hasSlotContent(slot, props = {}) {
-  const asArray = (arg) => (Array.isArray(arg) ? arg : arg != null ? [arg] : []);
-
-  const isVNodeEmpty = (vnode) => {
-    return (
-      !vnode ||
-      asArray(vnode).every(
-        (vnode) =>
-          vnode.type === Comment ||
-          (vnode.type === Text && !vnode.children?.length) ||
-          (vnode.type === Fragment && !vnode.children?.length),
-      )
-    );
-  };
-
-  return !isVNodeEmpty(slot?.(props));
-}
-
-/**
- Deeply clone given object (same as lodash.cloneDeep).
- @param {Object} entity
- @param cache
-
- @returns {Object}
- */
-function cloneDeep(entity, cache = new WeakMap()) {
-  const referenceTypes = ["Array", "Object", "Map", "Set", "Date"];
-  const entityType = Object.prototype.toString.call(entity);
-
-  if (
-    !new RegExp(referenceTypes.join("|")).test(entityType) ||
-    entity instanceof WeakMap ||
-    entity instanceof WeakSet
-  ) {
-    return entity;
-  }
-
-  if (cache.has(entity)) {
-    return cache.get(entity);
-  }
-
-  const c = new entity.constructor();
-
-  if (entity instanceof Map) {
-    entity.forEach((value, key) => c.set(cloneDeep(key), cloneDeep(value)));
-  }
-
-  if (entity instanceof Set) {
-    entity.forEach((value) => c.add(cloneDeep(value)));
-  }
-
-  if (entity instanceof Date) {
-    return new Date(entity);
-  }
-
-  cache.set(entity, c);
-
-  return Object.assign(
-    c,
-    ...Object.keys(entity).map((prop) => ({ [prop]: cloneDeep(entity[prop], cache) })),
-  );
-}
-
-function setColor(classes, color) {
-  return classes?.replaceAll("{color}", color);
-}

package/library.vue-tailwind-3/TDatepicker/components/t-date-trigger.js

@@ -1,257 +0,0 @@
-import { h } from "vue";
-
-const TDatepickerTrigger = {
-  name: "TDatepickerTrigger",
-
-  emits: ["clear", "click", "input", "keydown", "blur", "focus"],
-
-  props: {
-    id: {
-      type: String,
-      default: undefined,
-    },
-    name: {
-      type: String,
-      default: undefined,
-    },
-    disabled: {
-      type: Boolean,
-      default: undefined,
-    },
-    readonly: {
-      type: Boolean,
-      default: undefined,
-    },
-    autofocus: {
-      type: Boolean,
-      default: undefined,
-    },
-    required: {
-      type: Boolean,
-      default: undefined,
-    },
-    tabindex: {
-      type: [String, Number],
-      default: undefined,
-    },
-    inputName: {
-      type: String,
-      default: undefined,
-    },
-    placeholder: {
-      type: String,
-      default: undefined,
-    },
-    show: {
-      type: Function,
-      default: undefined,
-    },
-    hideIfFocusOutside: {
-      type: Function,
-      default: undefined,
-    },
-    conjunction: {
-      type: String,
-      required: true,
-    },
-    multiple: {
-      type: Boolean,
-      required: true,
-    },
-    range: {
-      type: Boolean,
-      required: true,
-    },
-    clearable: {
-      type: Boolean,
-      required: true,
-    },
-    locale: {
-      type: Object,
-      required: true,
-    },
-    userFormatedDate: {
-      type: [String, Array],
-      required: true,
-    },
-    formatedDate: {
-      type: [String, Array],
-      required: true,
-    },
-    value: {
-      type: [Date, Array],
-      default: null,
-    },
-    activeDate: {
-      type: Date,
-      required: true,
-    },
-    getElementCssClass: {
-      type: Function,
-      required: true,
-    },
-    hasFocus: {
-      type: Boolean,
-      required: true,
-    },
-  },
-
-  computed: {
-    hasValue() {
-      if (Array.isArray(this.value)) {
-        return this.value.length > 0;
-      }
-
-      return !!this.value;
-    },
-  },
-
-  methods: {
-    clearButtonClickHandler(e) {
-      this.$emit("clear", e);
-    },
-  },
-
-  render() {
-    const formattedDate = this.formatedDate;
-
-    let formText = "";
-
-    if (Array.isArray(this.userFormatedDate)) {
-      const conjunction = this.range ? this.locale.rangeSeparator : this.conjunction;
-
-      formText = this.userFormatedDate.join(conjunction);
-    } else {
-      formText = this.userFormatedDate;
-    }
-
-    const subElements = [
-      h("input", {
-        ref: "input",
-        class: this.getElementCssClass("input"),
-        readonly: !this.hasFocus ? this.readonly : true,
-        inputmode: "none",
-        id: this.id,
-        name: this.name,
-        disabled: this.disabled,
-        autocomplete: "off",
-        autofocus: this.autofocus,
-        type: "text",
-        required: this.required,
-        placeholder: this.placeholder,
-        tabindex: this.tabindex,
-        value: formText,
-
-        onClick: (e) => {
-          if (this.show) {
-            this.show();
-          }
-
-          this.$emit("click", e);
-        },
-        onInput: (e) => {
-          this.$emit("input", e);
-        },
-        onKeydown: (e) => {
-          this.$emit("keydown", e);
-        },
-        onBlur: (e) => {
-          if (this.hideIfFocusOutside) {
-            this.hideIfFocusOutside(e);
-          }
-
-          this.$emit("blur", e);
-        },
-        onFocus: (e) => {
-          if (this.show) {
-            this.show();
-          }
-
-          this.$emit("focus", e);
-        },
-      }),
-    ];
-
-    if (this.clearable && this.hasValue) {
-      const clearButtonSlot = this.$slots.clearButton
-        ? this.$slots.clearButton({
-            className: this.getElementCssClass("clearButtonIcon"),
-            formatedDate: this.formatedDate,
-            userFormatedDate: this.userFormatedDate,
-            value: this.value,
-            activeDate: this.activeDate,
-          })
-        : [
-            h(
-              "svg",
-              {
-                fill: "currentColor",
-                xmlns: "http://www.w3.org/2000/svg",
-                viewBox: "0 0 20 20",
-                class: this.getElementCssClass("clearButtonIcon"),
-              },
-              [
-                h("polygon", {
-                  points: `10 8.58578644 2.92893219 1.51471863 1.51471863 2.92893219 8.58578644 10 1.51471863 
-                    17.0710678 2.92893219 18.4852814 10 11.4142136 17.0710678 18.4852814 18.4852814 17.0710678 
-                    11.4142136 10 18.4852814 2.92893219 17.0710678 1.51471863 10 8.58578644`,
-                }),
-              ],
-            ),
-          ];
-
-      subElements.push(
-        h(
-          "button",
-          {
-            ref: "clearButton",
-            class: this.getElementCssClass("clearButton"),
-            type: "button",
-            tabindex: -1,
-            onClick: this.clearButtonClickHandler,
-          },
-          clearButtonSlot,
-        ),
-      );
-    }
-
-    if (this.multiple) {
-      const dates = Array.isArray(formattedDate) ? formattedDate : [formattedDate];
-      const hiddenInputs = dates.map((date) =>
-        h("input", {
-          type: "hidden",
-          value: date,
-          name: this.name,
-          disabled: this.disabled,
-          readonly: this.readonly,
-          required: this.required,
-        }),
-      );
-
-      subElements.push(...hiddenInputs);
-    } else {
-      subElements.push(
-        h("input", {
-          type: "hidden",
-          value: Array.isArray(formattedDate)
-            ? formattedDate.join(this.conjunction)
-            : formattedDate,
-          name: this.name,
-          disabled: this.disabled,
-          readonly: this.readonly,
-          required: this.required,
-        }),
-      );
-    }
-
-    return h(
-      "div",
-      {
-        class: this.getElementCssClass("inputWrapper"),
-      },
-      subElements,
-    );
-  },
-};
-
-export default TDatepickerTrigger;