vueless 0.0.2 → 0.0.3

package/ui.dropdown-list/composables/usePointer.js

@@ -0,0 +1,77 @@
+import { ref, computed } from "vue";
+
+export default function usePointer(options, optionHeight, listWrapperElement) {
+  const pointer = ref(null);
+  const pointerDirty = ref(false);
+
+  const pointerPosition = computed(() => {
+    return pointer.value * optionHeight || 0;
+  });
+
+  function scrollWrapperToElement() {
+    const visibleElements = listWrapperElement.value.getBoundingClientRect().height / optionHeight;
+    const currentElement = visibleElements - 1;
+    const currentPointerPosition = pointerPosition.value - currentElement * optionHeight;
+
+    if (listWrapperElement.value.scrollTop <= currentPointerPosition) {
+      listWrapperElement.value.scrollTop = currentPointerPosition;
+    }
+  }
+
+  function pointerForward() {
+    if (pointer.value < options.length - 1) {
+      pointer.value++;
+
+      const isGroup =
+        options[pointer.value].$isLabel ||
+        options[pointer.value].isSubGroup ||
+        options[pointer.value].$groupLabel;
+
+      if (listWrapperElement) scrollWrapperToElement();
+
+      if (options[pointer.value] && isGroup) {
+        pointerForward();
+      }
+    }
+
+    pointerDirty.value = true;
+  }
+
+  function pointerBackward() {
+    if (pointer.value > 0) {
+      pointer.value--;
+
+      const isGroup =
+        options[pointer.value].$isLabel ||
+        options[pointer.value].isSubGroup ||
+        options[pointer.value].$groupLabel;
+
+      if (listWrapperElement && listWrapperElement.value.scrollTop >= pointerPosition.value) {
+        listWrapperElement.value.scrollTop = pointerPosition.value;
+      }
+
+      if (options[pointer.value] && isGroup) {
+        pointerBackward();
+      }
+    } else {
+      if (options[pointer.value] && options[0].$isLabel) {
+        pointerForward();
+      }
+    }
+
+    pointerDirty.value = true;
+  }
+
+  function pointerSet(index) {
+    pointer.value = index;
+    pointerDirty.value = true;
+  }
+
+  function pointerReset() {
+    pointer.value = 0;
+
+    if (listWrapperElement) listWrapperElement.value.scrollTop = 0;
+  }
+
+  return { pointer, pointerDirty, pointerSet, pointerReset, pointerBackward, pointerForward };
+}

package/ui.dropdown-list/configs/default.config.js

@@ -0,0 +1,68 @@
+export default /*tw*/ {
+  wrapper: `
+    my-2 flex w-full absolute right-0 z-50
+    rounded-lg border border-gray-300 bg-white shadow
+    overflow-auto [-webkit-overflow-scrolling:touch]
+    focus:outline-none
+  `,
+  list: `
+      inline-block list-none align-top m-0 min-w-full p-0
+      hover:transition hover:duration-100 hover:ease-in-out bg-white opacity-1
+    `,
+  subGroupLabel: {
+    base: "pointer-events-none bg-transparent !font-medium leading-none !uppercase !text-gray-500/[85] pt-1",
+    variants: {
+      size: {
+        sm: "text-2xs",
+        md: "text-xs",
+        lg: "text-sm",
+      },
+    },
+  },
+  groupLabel: {
+    base: "pointer-events-none bg-transparent !font-medium leading-none !uppercase !text-gray-500/[85] pt-6 group-first/item:pt-2",
+    variants: {
+      size: {
+        sm: "text-2xs pb-1 mt-4",
+        md: "text-xs pb-1",
+        lg: "text-sm pb-1 mt-4",
+      },
+    },
+  },
+  option: {
+    base: `
+        p-3 flex items-center align-middle whitespace-nowrap cursor-pointer
+        font-normal !leading-none normal-case text-gray-900
+        hover:bg-gray-100 active:bg-gray-200 active:font-medium
+      `,
+    variants: {
+      size: {
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
+      },
+      disabled: {
+        true: "pointer-events-none",
+      },
+    },
+  },
+  optionHighlight: "bg-gray-100",
+  optionSelected: "bg-gray-200 font-medium",
+  optionItem: "group/item block",
+  addTitleWrapper: `
+    flex items-center justify-between cursor-pointer p-3 hover:bg-gray-100
+    active:bg-gray-200 active:font-medium -mb-6
+  `,
+  addTitle: "text-sm font-medium text-gray-900",
+  addTitleHotkey: "text-gray-500",
+  buttonAdd: "sticky left-[calc(100%-2.3rem)] bottom-2.5 p-1",
+  iconAddName: "add",
+  iconAdd: "bg-transparent",
+  defaultVariants: {
+    size: "md",
+    optionHeight: 40,
+    maxHeight: undefined,
+    disabled: false,
+    addOption: false,
+  },
+};

package/ui.dropdown-list/constants/index.js

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UDropdownList = "UDropdownList";

package/ui.dropdown-list/index.stories.js

@@ -1,15 +1,17 @@
 import { getArgTypes } from "vueless/service.storybook";
 
 import UDropdownList from "vueless/ui.dropdown-list";
+import URow from "vueless/ui.container-row";
 
 export default {
+  id: "2050",
   title: "Dropdowns / Dropdown List",
   component: UDropdownList,
   args: {
     options: [
-      { label: "option 1", value: "1" },
-      { label: "option 2", value: "2" },
-      { label: "option 3", value: "3" },
+      { label: "option 1", id: "1" },
+      { label: "option 2", id: "2" },
+      { label: "option 3", id: "3" },
     ],
   },
   argTypes: {
@@ -39,8 +41,36 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UDropdownList, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <div class="flex flex-col gap-6">
+      <URow>
+        <UDropdownList
+          v-for="(size, index) in sizes"
+          :key="index"
+          v-bind="args"
+          :size="size"
+        />
+      </URow>
+    </div>
+  `,
+});
+
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
+
+export const maxHeight = DefaultTemplate.bind({});
+maxHeight.args = { maxHeight: 80 };
+
 export const withoutOptions = DefaultTemplate.bind({});
 withoutOptions.args = { options: [] };

package/ui.dropdown-list/index.vue

@@ -1,139 +1,298 @@
 <template>
-  <div class="mono-dropdown-list">
-    <template v-if="options.length">
-      <div
-        v-for="(option, key) of options"
-        :key="key"
-        class="mono-dropdown-list-option"
-        :class="selectedOptionClass(option[valueKey])"
-        @click="onClickOption(option[valueKey])"
+  <div
+    ref="wrapperRef"
+    tabindex="1"
+    :style="{ maxHeight: wrapperHeight }"
+    v-bind="wrapperAttrs"
+    @keydown.self.down.prevent="pointerForward"
+    @keydown.self.up.prevent="pointerBackward"
+    @keydown.enter.tab.stop.self="addPointerElement"
+  >
+    <ul :id="`listbox-${id}`" v-bind="listAttrs" role="listbox">
+      <li
+        v-for="(option, index) of options"
+        :id="`${id}-${index}`"
+        :key="index"
+        :role="!(option && (option.$isLabel || option.$isDisabled)) ? 'option' : null"
+        v-bind="optionItemAttrs"
       >
-        {{ option[itemLabel] }}
-      </div>
-    </template>
-    <div v-else class="mono-dropdown-list-plug">{{ i18n.noDataToShow }}</div>
+        <!-- option title -->
+        <span
+          v-if="
+            !(option && (option.$isLabel || option.$isDisabled || option.isSubGroup)) &&
+            !option.isHidden
+          "
+          v-bind="optionAttrs(optionHighlight(index, option))"
+          @click.stop="select(option)"
+          @mouseenter.self="pointerSet(index)"
+        >
+          <!-- @slot Use it to add something before option. -->
+          <slot :option="option" name="before-option" />
+
+          <slot name="option" :option="option" :index="index">
+            <span :style="getMarginForSubCategory(option.level)" v-text="option[labelKey]" />
+          </slot>
+
+          <!-- @slot Use it to add something after option. -->
+          <slot :option="option" name="after-option" />
+        </span>
+
+        <!-- group title -->
+        <div
+          v-if="
+            option &&
+            (option.$isLabel || option.$isDisabled || option.isSubGroup) &&
+            !option.isHidden
+          "
+        >
+          <div v-if="option.$groupLabel" v-bind="groupLabelAttrs" v-text="option.$groupLabel" />
+
+          <div
+            v-else-if="option.isSubGroup"
+            :style="getMarginForSubCategory(option.level)"
+            v-bind="subGroupLabelAttrs"
+            v-text="option[labelKey]"
+          />
+        </div>
+      </li>
+      <slot
+        v-if="hasSlotContent($slots['empty']) || options.length === 0"
+        name="empty"
+        :empty-styles="optionClasses"
+      >
+        <span v-bind="optionAttrs()">
+          <span>{{ i18n.noDataToShow }}</span>
+        </span>
+      </slot>
+
+      <!-- Add button -->
+      <template v-if="addOption">
+        <div v-bind="addTitleWrapperAttrs" @click="onClickAddOption">
+          <div v-bind="addTitleAttrs">
+            {{ i18n.add }}
+            <span v-bind="addTitleHotkeyAttrs" v-text="addOptionKeyCombination" />
+          </div>
+        </div>
+        <UButton pill square v-bind="buttonAddAttrs" @click="onClickAddOption">
+          <UIcon color="white" size="xs" :name="config.iconAddName" v-bind="iconAddAttrs" />
+        </UButton>
+      </template>
+    </ul>
   </div>
 </template>
 
-<script>
-import I18nServiceDefault from "vueless/service.i18n";
-
-export default {
-  name: "UDropdownList",
-
-  props: {
-    /**
-     * Set input select value.
-     */
-    modelValue: {
-      type: [String, Number],
-      default: "",
-    },
-
-    /**
-     * Set options for component.
-     */
-    options: {
-      type: Array,
-      default: () => [],
-    },
-
-    /**
-     * Label from option Object, that will be visible in the dropdown.
-     */
-    itemLabel: {
-      type: String,
-      default: "label",
-    },
-
-    /**
-     * Set track value key.
-     */
-    valueKey: {
-      type: String,
-      default: "id",
-    },
+<script setup>
+import { computed, ref } from "vue";
+
+import usePointer from "./composables/usePointer";
+import useAttrs from "./composables/attrs.composable";
+
+import I18nServiceDefault from "@vueless/services/i18n";
+import UIService, { getRandomId, isMac } from "vueless/service.ui";
+
+import defaultConfig from "./configs/default.config.js";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UDropdownList", inheritAttrs: false });
+
+import { UDropdownList } from "./constants";
+
+const modelValue = defineModel({ type: [String, Number, Object], default: "" });
+
+const props = defineProps({
+  /**
+   * Set options list.
+   */
+  options: {
+    type: Array,
+    default: () => [],
   },
 
-  emits: ["update:modelValue"],
+  /**
+   * Label key in the item object of options.
+   */
+  labelKey: {
+    type: String,
+    default: "label",
+  },
 
-  setup() {
-    const { getTranslation } = new I18nServiceDefault();
+  /**
+   * Value key in the item object of options.
+   */
+  valueKey: {
+    type: String,
+    default: "id",
+  },
 
-    return { getTranslation };
+  /**
+   * Set a name of the property containing the group label.
+   */
+  groupLabel: {
+    type: String,
+    default: "label",
   },
 
-  computed: {
-    selectValue: {
-      get() {
-        return this.modelValue;
-      },
-      set(value) {
-        this.$emit("update:modelValue", value);
-      },
-    },
-
-    i18n() {
-      return {
-        noDataToShow: this.getTranslation("noDataToShow"),
-      };
-    },
+  /**
+   * Set a name of the property containing the group values.
+   */
+  groupValues: {
+    type: String,
+    default: "",
   },
 
-  methods: {
-    selectedOptionClass(value) {
-      return this.selectValue === value ? "selected" : "";
-    },
+  /**
+   * Show add new option button to the list.
+   */
+  addOption: {
+    type: Boolean,
+    default: false,
+  },
 
-    onClickOption(value) {
-      this.selectValue = value;
-    },
+  /**
+   * Disables the select.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDropdownList).default.disabled,
   },
-};
-</script>
 
-<i18n>
-en:
-  noDataToShow: "No data to show."
-ru:
-  noDataToShow: "Нет данных."
-ua:
-  noDataToShow: "Дані відсутні."
-</i18n>
+  /**
+   * Set size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UDropdownList).default.size,
+  },
+
+  /**
+   * List max height in pixels.
+   */
+  maxHeight: {
+    type: [Number, String],
+    default: UIService.get(defaultConfig, UDropdownList).default.maxHeight,
+  },
+
+  /**
+   * List option height in pixels.
+   */
+  optionHeight: {
+    type: Number,
+    default: UIService.get(defaultConfig, UDropdownList).default.optionHeight,
+  },
+
+  /**
+   * Generates unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
+
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "addOption"]);
+
+const wrapperRef = ref(null);
+
+const { pointer, pointerDirty, pointerSet, pointerBackward, pointerForward, pointerReset } =
+  usePointer(props.options, props.optionHeight, wrapperRef);
+const { getTranslation } = new I18nServiceDefault();
+
+const {
+  config,
+  hasSlotContent,
+  wrapperAttrs,
+  listAttrs,
+  optionItemAttrs,
+  addTitleWrapperAttrs,
+  addTitleAttrs,
+  addTitleHotkeyAttrs,
+  buttonAddAttrs,
+  iconAddAttrs,
+  optionAttrs,
+  subGroupLabelAttrs,
+  groupLabelAttrs,
+  optionClasses,
+} = useAttrs(props);
+
+defineExpose({ pointerSet, pointerBackward, pointerForward, pointerReset, addPointerElement });
 
-<style lang="postcss" scoped>
-.mono-dropdown-list {
-  &:hover {
-    @apply transition duration-100 ease-in-out;
+const i18n = computed(() => {
+  return {
+    noDataToShow: getTranslation("noDataToShow"),
+    add: getTranslation("add"),
+  };
+});
+
+const addOptionKeyCombination = computed(() => {
+  return isMac ? "(⌘ + Enter)" : "(Ctrl + Enter)";
+});
+
+const wrapperHeight = computed(() =>
+  props.maxHeight === undefined ? "auto" : `${props.maxHeight}px`,
+);
+
+function onClickAddOption() {
+  emit("addOption");
+}
+
+function select(option, key) {
+  if (props.disabled || option.$isDisabled || option.$isLabel) {
+    return;
   }
 
-  &-option {
-    @apply whitespace-nowrap text-base font-normal normal-case text-gray-900 no-underline;
-    @apply min-h-full cursor-pointer align-middle;
-    @apply px-3 py-2;
+  if (key === "Tab" && !pointerDirty.value) return;
 
-    &:first-child {
-      @apply rounded-t-lg;
-    }
+  modelValue.value = option[props.valueKey];
+}
 
-    &:last-child {
-      @apply rounded-b-lg;
-    }
+function isSelectedOption(option) {
+  return modelValue.value === option[props.valueKey];
+}
 
-    &:hover {
-      @apply bg-gray-100;
-    }
+function getMarginForSubCategory(level) {
+  const baseMargin = 1;
 
-    &:active,
-    &.selected {
-      @apply !bg-gray-200 font-medium;
-    }
+  if (level > 1) {
+    return `margin-left: ${baseMargin * (level - 1)}rem`;
   }
+}
 
-  &-plug {
-    @apply whitespace-nowrap text-base font-normal normal-case text-gray-900 no-underline;
-    @apply relative block min-h-full cursor-pointer align-middle;
-    @apply px-3 py-2;
+function optionHighlight(index, option) {
+  const classes = [];
+
+  if (index === pointer.value) classes.push(config.value.optionHighlight);
+  if (isSelectedOption(option)) classes.push(config.value.optionSelected);
+
+  return classes;
+}
+
+function addPointerElement({ key } = "Enter") {
+  if (props.options.length > 0) {
+    select(props.options[pointer.value], key);
   }
+
+  pointerReset();
 }
-</style>
+</script>
+
+<i18n>
+en:
+  noDataToShow: "No data to show."
+  add: Add
+ru:
+  noDataToShow: "Нет данных."
+  add: Добавить
+ua:
+  noDataToShow: "Дані відсутні."
+  add: Додати
+</i18n>

package/ui.form-calendar/Docs.mdx

@@ -0,0 +1,52 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source, Markdown } from "@storybook/blocks";
+import { getSource } from "vueless/service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />
+
+## Formatting tokens
+Each character in the table below can be used in `dateFormat` and `userFormat` options to achieve the format you need.
+
+<Markdown>
+{`
+| Token | Description                                               | Example                                                       |
+| ----- | --------------------------------------------------------- | ------------------------------------------------------------- |
+| d     | Day of the month, 2 digits with leading zeros             | 01 to 31                                                      |
+| D     | A textual representation of a day                         | Mon through Sun                                               |
+| l     | A full textual representation of the day of the week      | Sunday through Saturday                                       |
+| j     | Day of the month without leading zeros                    | 1 to 31                                                       |
+| J     | Day of the month without leading zeros and ordinal suffix | 1st, 2nd, to 31st                                             |
+| w     | Numeric representation of the day of the week             | 0 (for Sunday) through 6 (for Saturday)                       |
+| W     | Numeric representation of the week                        | 0 (first week of the year) through 52 (last week of the year) |
+| F     | A full textual representation of a month                  | January through December                                      |
+| m     | Numeric representation of a month, with leading zero      | 01 through 12                                                 |
+| n     | Numeric representation of a month, without leading zeros  | 1 through 12                                                  |
+| M     | A short textual representation of a month                 | Jan through Dec                                               |
+| U     | A short textual representation of a month                 | 1413704993                                                    |
+| y     | A two-digit representation of a year                      | 99 or 03                                                      |
+| Y     | A full numeric representation of a year, 4 digits         | 1999 or 2003                                                  |
+| Z     | ISO Date format                                           | 2017-03-04T01:23:43.000Z                                      |
+| H     | Hours (24 hours)                                          | 00 to 23                                                      |
+| h     | Hours                                                     | 1 to 12                                                       |
+| G     | Hours, 2 digits with leading zeros                        | 1 to 12                                                       |
+| i     | Minutes                                                   | 00 to 59                                                      |
+| S     | Seconds, 2 digits                                         | 00 to 59                                                      |
+| s     | Seconds                                                   | 0, 1 to 59                                                    |
+`}
+</Markdown>
+
+## Escaping Formatting Tokens
+You may escape formatting tokens using \\\\.
+
+<Source code={`dateFormat: "Y-m-d\\Z", // Displays: 2017-01-22Z`} language="jsx" dark />