origam 2.2.1 → 2.5.0

package/dist/src/components/Tabs/OrigamTabPanels.vue

@@ -0,0 +1,139 @@
+<template>
+	<component
+			:is="tag"
+			:id="id"
+			ref="rootRef"
+			v-touch="touchOptions"
+			:class="panelsClasses"
+			:style="panelsStyles"
+	>
+		<origam-defaults-provider :defaults="slotDefaults">
+			<slot
+					name="default"
+					v-bind="slotProps"
+			/>
+		</origam-defaults-provider>
+	</component>
+</template>
+
+<script setup>
+import { computed, provide, ref, shallowRef, StyleValue, watch } from "vue";
+import { OrigamDefaultsProvider } from "../../components";
+import {
+  useGroup,
+  useProps,
+  useStyle
+} from "../../composables";
+import { ORIGAM_TAB_PANELS_KEY, ORIGAM_TAB_PANELS_CTX_KEY } from "../../consts";
+import { vTouch } from "../../directives";
+import { DIRECTION } from "../../enums";
+const props = defineProps({
+  tag: { type: String, required: false, default: "div" },
+  transition: { type: [String, Boolean], required: false, default: "fade" },
+  swipeable: { type: Boolean, required: false, default: false },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  direction: { type: null, required: false, default: DIRECTION.HORIZONTAL },
+  disabled: { type: Boolean, required: false },
+  modelValue: { type: null, required: false },
+  multiple: { type: Boolean, required: false },
+  mandatory: { type: Boolean, required: false, default: true },
+  max: { type: Number, required: false },
+  selectedClass: { type: String, required: false, default: "origam-tab-panel--active" }
+});
+defineEmits(["update:modelValue"]);
+const { filterProps } = useProps(props);
+const { isSelected, select, next, prev, selected, items } = useGroup(props, ORIGAM_TAB_PANELS_KEY);
+const rootRef = ref();
+const isReversed = shallowRef(false);
+const activeIndex = computed(() => {
+  return items.value.findIndex((item) => selected.value.includes(item.id));
+});
+watch(activeIndex, (newVal, oldVal) => {
+  isReversed.value = newVal < oldVal;
+});
+const transition = computed(() => {
+  if (props.transition === false) return false;
+  return props.transition || "fade";
+});
+provide(ORIGAM_TAB_PANELS_CTX_KEY, {
+  transition,
+  isReversed
+});
+const touchOptions = computed(() => {
+  if (!props.swipeable) return false;
+  const options = {
+    left: () => next(),
+    right: () => prev()
+  };
+  return options;
+});
+const slotProps = computed(() => ({
+  isSelected,
+  select,
+  next,
+  prev,
+  selected,
+  items: items.value
+}));
+const slotDefaults = computed(() => ({
+  "origam-tab-panel": {
+    transition: props.transition
+  }
+}));
+const panelsStyles = computed(() => {
+  return [
+    props.style
+  ];
+});
+const panelsClasses = computed(() => {
+  return [
+    "origam-tab-panels",
+    `origam-tab-panels--direction-${props.direction}`,
+    {
+      "origam-tab-panels--swipeable": props.swipeable
+    },
+    props.class
+  ];
+});
+const { id, css, load, isLoaded, unload } = useStyle(panelsStyles);
+defineExpose({
+  filterProps,
+  next,
+  prev,
+  select,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-tab-panels {
+		display: block;
+		position: relative;
+
+		padding-block: var(--origam-tab-panels__panel---padding-block, 16px);
+		padding-inline: var(--origam-tab-panels__panel---padding-inline, 0);
+
+		&--direction-vertical {
+			display: flex;
+			flex-direction: row;
+		}
+
+		&--swipeable {
+			overflow: hidden;
+			touch-action: pan-y;
+		}
+	}
+</style>
+
+<style>
+	:root {
+		--origam-tab-panels__panel---padding-block: 16px;
+		--origam-tab-panels__panel---padding-inline: 0;
+	}
+</style>

package/dist/src/components/Tabs/OrigamTabs.vue

@@ -0,0 +1,242 @@
+<template>
+	<component
+			:is="tag"
+			:id="id"
+			ref="rootRef"
+			role="tablist"
+			:aria-orientation="ariaOrientation"
+			:class="tabsClasses"
+			:style="tabsStyles"
+			@keydown="handleKeydown"
+	>
+		<origam-defaults-provider :defaults="slotDefaults">
+			<slot
+					name="default"
+					v-bind="slotProps"
+			/>
+		</origam-defaults-provider>
+	</component>
+</template>
+
+<script setup>
+import { computed, ref, StyleValue } from "vue";
+import { OrigamDefaultsProvider } from "../../components";
+import {
+  useDensity,
+  useGroup,
+  useProps,
+  useRounded,
+  useStyle
+} from "../../composables";
+import { ORIGAM_TABS_KEY } from "../../consts";
+import { DENSITY, DIRECTION, TAB_VARIANT } from "../../enums";
+const props = defineProps({
+  tag: { type: String, required: false, default: "div" },
+  variant: { type: null, required: false, default: TAB_VARIANT.DEFAULT },
+  fixed: { type: Boolean, required: false, default: false },
+  centered: { type: Boolean, required: false, default: false },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  direction: { type: null, required: false, default: DIRECTION.HORIZONTAL },
+  density: { type: null, required: false, default: DENSITY.DEFAULT },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  disabled: { type: Boolean, required: false },
+  modelValue: { type: null, required: false },
+  multiple: { type: Boolean, required: false },
+  mandatory: { type: Boolean, required: false, default: true },
+  max: { type: Number, required: false },
+  selectedClass: { type: String, required: false, default: "origam-tab--active" }
+});
+defineEmits(["update:modelValue"]);
+const { filterProps } = useProps(props);
+const { isSelected, select, next, prev, selected, items } = useGroup(props, ORIGAM_TABS_KEY);
+const rootRef = ref();
+const slotProps = computed(() => ({
+  isSelected,
+  select,
+  next,
+  prev,
+  selected,
+  items: items.value
+}));
+const slotDefaults = computed(() => ({
+  "origam-tab": {
+    density: props.density,
+    color: props.color,
+    variant: props.variant,
+    fixed: props.fixed
+  }
+}));
+const ariaOrientation = computed(() => props.direction === DIRECTION.VERTICAL ? "vertical" : "horizontal");
+const focusTab = (id2) => {
+  if (!rootRef.value) return;
+  const target = rootRef.value.querySelector(`[data-origam-tab-id="${id2}"]`);
+  target?.focus();
+};
+const focusFirstNonDisabled = (offset) => {
+  const list = items.value;
+  if (!list.length) return;
+  const start = offset > 0 ? 0 : list.length - 1;
+  const end = offset > 0 ? list.length : -1;
+  for (let i = start; i !== end; i += offset) {
+    const item = list[i];
+    if (!item.disabled) {
+      select(item.id, true);
+      focusTab(item.id);
+      return;
+    }
+  }
+};
+const handleKeydown = (event) => {
+  const isHorizontal = props.direction !== DIRECTION.VERTICAL;
+  const prevKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
+  const nextKey = isHorizontal ? "ArrowRight" : "ArrowDown";
+  const currentId = selected.value[0];
+  if (event.key === prevKey) {
+    event.preventDefault();
+    prev();
+    if (selected.value[0] != null) focusTab(selected.value[0]);
+  } else if (event.key === nextKey) {
+    event.preventDefault();
+    next();
+    if (selected.value[0] != null) focusTab(selected.value[0]);
+  } else if (event.key === "Home") {
+    event.preventDefault();
+    focusFirstNonDisabled(1);
+  } else if (event.key === "End") {
+    event.preventDefault();
+    focusFirstNonDisabled(-1);
+  } else if (event.key === "Enter" || event.key === " ") {
+    if (currentId != null) {
+      event.preventDefault();
+      select(currentId, true);
+    }
+  }
+};
+const { densityClasses } = useDensity(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
+const tabsStyles = computed(() => {
+  return [
+    roundedStyles.value,
+    props.style
+  ];
+});
+const tabsClasses = computed(() => {
+  return [
+    "origam-tabs",
+    `origam-tabs--${props.variant}`,
+    `origam-tabs--direction-${props.direction}`,
+    {
+      "origam-tabs--fixed": props.fixed,
+      "origam-tabs--centered": props.centered
+    },
+    densityClasses.value,
+    roundedClasses.value,
+    props.class
+  ];
+});
+const { id, css, load, isLoaded, unload } = useStyle(tabsStyles);
+defineExpose({
+  filterProps,
+  next,
+  prev,
+  select,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-tabs {
+		display: flex;
+		flex-wrap: nowrap;
+		position: relative;
+		min-height: var(--origam-tabs---height, 48px);
+
+		gap: var(--origam-tabs---gap, 0);
+		padding-block: var(--origam-tabs---padding-block, 0);
+		padding-inline: var(--origam-tabs---padding-inline, 0);
+
+		background-color: var(--origam-tabs---background-color, transparent);
+		border-radius: var(--origam-tabs---border-radius, 0);
+		border-width: var(--origam-tabs---border-width, 0);
+		border-style: var(--origam-tabs---border-style, solid);
+		border-color: var(--origam-tabs---border-color, currentColor);
+		color: var(--origam-tabs---color, inherit);
+
+		&--direction-horizontal {
+			flex-direction: row;
+			align-items: stretch;
+		}
+
+		&--direction-vertical {
+			flex-direction: column;
+			align-items: stretch;
+			min-height: 0;
+		}
+
+		&--fixed {
+			:deep(.origam-tab) {
+				flex: 1 1 0;
+				min-width: 0;
+			}
+		}
+
+		&--centered {
+			justify-content: center;
+		}
+
+		&--default {
+			border-block-end-width: var(--origam-tabs--default---border-block-end-width, 1px);
+			border-block-end-color: var(--origam-tabs--default---border-block-end-color, var(--origam-color__border---subtle, rgba(0, 0, 0, 0.12)));
+		}
+
+		&--pills {
+			background-color: var(--origam-tabs--pills---background-color, transparent);
+			gap: var(--origam-tabs--pills---gap, 8px);
+			padding: var(--origam-tabs--pills---padding, 4px);
+		}
+
+		&--underline {
+			border-block-end-width: var(--origam-tabs--underline---border-block-end-width, 1px);
+			border-block-end-color: var(--origam-tabs--underline---border-block-end-color, var(--origam-color__border---subtle, rgba(0, 0, 0, 0.12)));
+		}
+
+		&--density-comfortable {
+			--origam-tabs---height: 56px;
+		}
+
+		&--density-default {
+			--origam-tabs---height: 48px;
+		}
+
+		&--density-compact {
+			--origam-tabs---height: 36px;
+		}
+	}
+</style>
+
+<style>
+	:root {
+		--origam-tabs---height: 48px;
+		--origam-tabs---gap: 0;
+		--origam-tabs---padding-block: 0;
+		--origam-tabs---padding-inline: 0;
+		--origam-tabs---background-color: transparent;
+		--origam-tabs---border-radius: 0;
+		--origam-tabs---border-width: 0;
+		--origam-tabs---border-style: solid;
+		--origam-tabs---border-color: currentColor;
+		--origam-tabs---color: inherit;
+	}
+</style>

package/dist/src/components/Tabs/index.cjs

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OrigamTab", {
+  enumerable: true,
+  get: function () {
+    return _OrigamTab.default;
+  }
+});
+Object.defineProperty(exports, "OrigamTabPanel", {
+  enumerable: true,
+  get: function () {
+    return _OrigamTabPanel.default;
+  }
+});
+Object.defineProperty(exports, "OrigamTabPanels", {
+  enumerable: true,
+  get: function () {
+    return _OrigamTabPanels.default;
+  }
+});
+Object.defineProperty(exports, "OrigamTabs", {
+  enumerable: true,
+  get: function () {
+    return _OrigamTabs.default;
+  }
+});
+var _OrigamTabs = _interopRequireDefault(require("./OrigamTabs.vue"));
+var _OrigamTab = _interopRequireDefault(require("./OrigamTab.vue"));
+var _OrigamTabPanels = _interopRequireDefault(require("./OrigamTabPanels.vue"));
+var _OrigamTabPanel = _interopRequireDefault(require("./OrigamTabPanel.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/Tabs/index.d.ts

@@ -0,0 +1,4 @@
+export { default as OrigamTabs } from './OrigamTabs.vue';
+export { default as OrigamTab } from './OrigamTab.vue';
+export { default as OrigamTabPanels } from './OrigamTabPanels.vue';
+export { default as OrigamTabPanel } from './OrigamTabPanel.vue';

package/dist/src/components/Tabs/index.js

@@ -0,0 +1,4 @@
+export { default as OrigamTabs } from "./OrigamTabs.vue";
+export { default as OrigamTab } from "./OrigamTab.vue";
+export { default as OrigamTabPanels } from "./OrigamTabPanels.vue";
+export { default as OrigamTabPanel } from "./OrigamTabPanel.vue";

package/dist/src/components/TextField/OrigamTextField.vue

@@ -89,13 +89,17 @@
 									:name="name"
 									:placeholder="placeholder"
 									:readonly="isReadonly"
+									:required="required || undefined"
+									:aria-required="required ? 'true' : undefined"
 									:size="1"
-									:type="type"
-									:value="model"
+									:type="resolvedInputType"
+									:value="displayValue"
+									:aria-invalid="ariaInvalid"
 									v-bind="{ ...fieldSlotProps, ...inputAttrs }"
 									@blur="handleBlur"
 									@focus="handleFocus"
 									@input="handleInput"
+									@paste="handlePaste"
 							>
 						</div>
 					</template>
@@ -181,7 +185,7 @@
 </template>
 
 <script setup>
-import { computed, nextTick, ref, toRef, StyleValue, useAttrs, useSlots } from "vue";
+import { computed, nextTick, ref, toRef, StyleValue, useAttrs, useSlots, watch } from "vue";
 import { OrigamCounter, OrigamField, OrigamInput } from "../../components";
 import {
   useAdjacent,
@@ -189,6 +193,7 @@ import {
   useDefaults,
   useFocus,
   useLocale,
+  useMask,
   useProps,
   useStyle,
   useVModel
@@ -196,7 +201,7 @@ import {
 import { ACTIVE_TEXT_FIELD_TYPE, INPUT_TEXT_FIELD_TYPE } from "../../consts";
 import { vIntersect } from "../../directives";
 import { DENSITY, DIRECTION, MDI_ICONS, TEXT_FIELD_TYPE } from "../../enums";
-import { filterInputAttrs, forwardRefs } from "../../utils";
+import { applyMask, filterInputAttrs, forwardRefs, resolveMaskConfig } from "../../utils";
 const _props = defineProps({
   autofocus: { type: Boolean, required: false },
   counter: { type: [Boolean, Number, String], required: false },
@@ -207,10 +212,11 @@ const _props = defineProps({
   role: { type: String, required: false },
   type: { type: null, required: false, default: TEXT_FIELD_TYPE.TEXT },
   modelModifiers: { type: [String, Boolean], required: false },
+  mask: { type: null, required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   centerAffix: { type: Boolean, required: false, default: true },
   dirty: { type: Boolean, required: false },
@@ -228,7 +234,7 @@ const _props = defineProps({
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   appendInnerAvatar: { type: String, required: false },
   appendInnerIcon: { type: null, required: false },
   prependInnerAvatar: { type: String, required: false },
@@ -297,7 +303,7 @@ const _props = defineProps({
   prependIcon: { type: null, required: false }
 });
 const props = useDefaults(_props);
-const emits = defineEmits(["click:control", "mousedown:control", "update:focused", "update:modelValue", "click:appendInner", "click:prependInner", "click:clear", "update:active", "click:append", "click:prepend"]);
+const emits = defineEmits(["click:control", "mousedown:control", "valid", "complete", "update:focused", "update:modelValue", "click:appendInner", "click:prependInner", "click:clear", "update:active", "click:append", "click:prepend"]);
 defineSlots();
 const slots = useSlots();
 const attrs = useAttrs();
@@ -370,8 +376,57 @@ const handleClear = (e) => {
     emits("click:clear", e);
   });
 };
+const maskConfig = computed(() => resolveMaskConfig(props.mask ?? null));
+const hasMask = computed(() => maskConfig.value !== null);
+const {
+  masked: maskedValue,
+  unmasked: unmaskedValue,
+  isValid: maskIsValid,
+  complete: maskComplete
+} = useMask(model, toRef(props, "mask"));
+const displayValue = computed(() => {
+  return hasMask.value ? maskedValue.value : model.value ?? "";
+});
+const ariaInvalid = computed(() => {
+  if (!hasMask.value) return void 0;
+  if (!isFocused.value && !model.value) return void 0;
+  return !maskIsValid.value;
+});
+const resolvedInputType = computed(() => {
+  if (!hasMask.value) return props.type;
+  const pattern = maskConfig.value?.pattern ?? "";
+  if (typeof props.mask === "string" && props.mask.startsWith("phone")) {
+    return "tel";
+  }
+  if (pattern && /^[#\s+()\-./]+$/.test(pattern)) {
+    return "tel";
+  }
+  return props.type;
+});
+watch(maskIsValid, (v) => {
+  if (hasMask.value) emits("valid", v);
+}, { immediate: false });
+watch(maskComplete, (c) => {
+  if (hasMask.value) emits("complete", { complete: c, unmasked: unmaskedValue.value });
+}, { immediate: false });
 const handleInput = (e) => {
   const el = e.target;
+  if (hasMask.value) {
+    const cfg = maskConfig.value;
+    const tokens = cfg?.pattern ?? "";
+    const r = applyMask(el.value, tokens);
+    model.value = r.unmasked;
+    nextTick(() => {
+      if (el.value !== r.masked) el.value = r.masked;
+      const pos = r.masked.length;
+      try {
+        el.setSelectionRange(pos, pos);
+      } catch (err) {
+        void err;
+      }
+    });
+    return;
+  }
   model.value = el.value;
   if (typeof props.modelModifiers === "string" && INPUT_TEXT_FIELD_TYPE.includes(props.type)) {
     const caretPosition = [el.selectionStart, el.selectionEnd];
@@ -381,6 +436,17 @@ const handleInput = (e) => {
     });
   }
 };
+const handlePaste = (e) => {
+  if (!hasMask.value) return;
+  const text = e.clipboardData?.getData("text") ?? "";
+  if (!text) return;
+  e.preventDefault();
+  const cfg = maskConfig.value;
+  if (!cfg) return;
+  const merged = (unmaskedValue.value ?? "") + text;
+  const r = applyMask(merged, cfg.pattern);
+  model.value = r.unmasked;
+};
 const hasCounter = computed(() => {
   return slots.counter || props.counter !== false && props.counter != null;
 });
@@ -393,6 +459,12 @@ const enrichedRules = computed(() => {
     const limit = props.counter;
     base.push((v) => !v || v.length <= limit || t("origam.validation.max_length", [limit]));
   }
+  if (hasMask.value) {
+    base.push(() => {
+      if (!model.value) return true;
+      return maskIsValid.value || t("origam.validation.invalid_format", "Invalid format");
+    });
+  }
   return base;
 });
 const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);