origam 2.2.1 → 2.3.0

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

@@ -0,0 +1,263 @@
+<template>
+	<component
+			:is="tag"
+			:id="tabDomId"
+			ref="rootRef"
+			role="tab"
+			type="button"
+			:class="tabClasses"
+			:style="tabStyles"
+			:aria-selected="ariaSelected"
+			:aria-controls="panelId"
+			:aria-disabled="isDisabled || undefined"
+			:tabindex="tabIndex"
+			:disabled="isDisabled || undefined"
+			:data-origam-tab-id="groupItem?.id"
+			@click="handleClick"
+	>
+		<span
+				v-if="icon"
+				class="origam-tab__prepend"
+		>
+			<origam-icon :icon="icon"/>
+		</span>
+
+		<span class="origam-tab__label">
+			<slot
+					name="default"
+					v-bind="slotProps"
+			>
+				{{ text }}
+			</slot>
+		</span>
+
+		<span
+				v-if="appendIcon"
+				class="origam-tab__append"
+		>
+			<origam-icon :icon="appendIcon"/>
+		</span>
+
+		<span
+				v-if="hasIndicator"
+				class="origam-tab__indicator"
+				aria-hidden="true"
+		/>
+	</component>
+</template>
+
+<script setup>
+import { computed, inject, ref, StyleValue } from "vue";
+import { OrigamIcon } from "../../components";
+import {
+  useDefaults,
+  useGroupItem,
+  useProps,
+  useStyle
+} from "../../composables";
+import { ORIGAM_TABS_KEY, ORIGAM_TAB_PANELS_KEY } from "../../consts";
+const _props = defineProps({
+  text: { type: String, required: false, default: "" },
+  variant: { type: null, required: false, default: void 0 },
+  tag: { type: String, required: false, default: "button" },
+  icon: { type: null, required: false },
+  appendIcon: { 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 },
+  value: { type: null, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false },
+  selectedClass: { type: String, required: false }
+});
+const props = useDefaults(_props);
+const { filterProps } = useProps(props);
+const rootRef = ref();
+const groupItem = useGroupItem(props, ORIGAM_TABS_KEY);
+const panelsGroup = inject(ORIGAM_TAB_PANELS_KEY, null);
+if (!groupItem) {
+  throw new Error("[Origam] <OrigamTab> must be used inside an <OrigamTabs>");
+}
+const slotProps = computed(() => ({
+  isSelected: groupItem.isSelected.value,
+  toggle: groupItem.toggle,
+  select: groupItem.select,
+  value: groupItem.value.value,
+  disabled: groupItem.disabled.value
+}));
+const tabDomId = computed(() => `origam-tab-${groupItem.id}`);
+const panelId = computed(() => {
+  if (!panelsGroup) return void 0;
+  const panel = panelsGroup.items.value.find((item) => item.value === groupItem.value.value);
+  return panel ? `origam-tab-panel-${panel.id}` : void 0;
+});
+const ariaSelected = computed(() => groupItem.isSelected.value ? "true" : "false");
+const tabIndex = computed(() => {
+  if (groupItem.disabled.value) return -1;
+  return groupItem.isSelected.value ? 0 : -1;
+});
+const isDisabled = computed(() => groupItem.disabled.value);
+const handleClick = (event) => {
+  if (isDisabled.value) return;
+  event.preventDefault();
+  groupItem.select(true);
+};
+const hasIndicator = computed(() => props.variant === "underline");
+const tabStyles = computed(() => {
+  return [
+    props.style
+  ];
+});
+const tabClasses = computed(() => {
+  return [
+    "origam-tab",
+    groupItem.selectedClass.value,
+    {
+      "origam-tab--disabled": isDisabled.value,
+      "origam-tab--with-prepend": !!props.icon,
+      "origam-tab--with-append": !!props.appendIcon
+    },
+    props.class
+  ];
+});
+const { id, css, load, isLoaded, unload } = useStyle(tabStyles);
+defineExpose({
+  filterProps,
+  toggle: groupItem.toggle,
+  select: groupItem.select,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-tab {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--origam-tabs__item---gap, 8px);
+		position: relative;
+		flex: 0 0 auto;
+
+		padding-block: var(--origam-tabs__item---padding-block, 0);
+		padding-inline: var(--origam-tabs__item---padding-inline, 16px);
+		min-height: var(--origam-tabs__item---height, 48px);
+
+		font-family: inherit;
+		font-size: var(--origam-tabs__item---font-size, 0.875rem);
+		font-weight: var(--origam-tabs__item---font-weight, 500);
+		line-height: 1;
+		letter-spacing: var(--origam-tabs__item---letter-spacing, 0.03125em);
+		text-transform: var(--origam-tabs__item---text-transform, none);
+
+		color: var(--origam-tabs__item---color, currentColor);
+		background-color: var(--origam-tabs__item---background-color, transparent);
+
+		border: var(--origam-tabs__item---border-width, 0) solid transparent;
+		border-radius: var(--origam-tabs__item---border-radius, 0);
+
+		cursor: pointer;
+		user-select: none;
+		-webkit-tap-highlight-color: transparent;
+		appearance: none;
+
+		transition-property: color, background-color, border-color, transform;
+		transition-duration: var(--origam-tabs__item---transition-duration, 0.2s);
+		transition-timing-function: var(--origam-tabs__item---transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+
+		&:focus-visible {
+			outline: 2px solid var(--origam-tabs__item--focus---outline-color, currentColor);
+			outline-offset: -2px;
+		}
+
+		&:hover:not(.origam-tab--disabled) {
+			color: var(--origam-tabs__item--hover---color, currentColor);
+			background-color: var(--origam-tabs__item--hover---background-color, rgba(0, 0, 0, 0.04));
+		}
+
+		&--active {
+			color: var(--origam-tabs__item--active---color, currentColor);
+			background-color: var(--origam-tabs__item--active---background-color, transparent);
+			font-weight: var(--origam-tabs__item--active---font-weight, 600);
+		}
+
+		&--disabled {
+			color: var(--origam-tabs__item--disabled---color, rgba(0, 0, 0, 0.38));
+			background-color: var(--origam-tabs__item--disabled---background-color, transparent);
+			cursor: not-allowed;
+			pointer-events: none;
+		}
+
+		&__prepend,
+		&__append {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		&__indicator {
+			position: absolute;
+			inset-inline: 0;
+			inset-block-end: 0;
+			height: var(--origam-tabs__indicator---height, 2px);
+			background-color: var(--origam-tabs__indicator---color, currentColor);
+			transform: scaleX(0);
+			transform-origin: center;
+			transition: transform 0.2s ease;
+		}
+
+		&--active &__indicator {
+			transform: scaleX(1);
+		}
+	}
+
+	.origam-tabs--direction-vertical .origam-tab {
+		justify-content: flex-start;
+
+		&__indicator {
+			inset-block: 0;
+			inset-inline-end: 0;
+			inset-inline-start: auto;
+			width: var(--origam-tabs__indicator---height, 2px);
+			height: auto;
+			transform: scaleY(0);
+		}
+
+		&--active .origam-tab__indicator {
+			transform: scaleY(1);
+		}
+	}
+
+	.origam-tabs--pills .origam-tab {
+		border-radius: var(--origam-tabs__item---border-radius, var(--origam-radius---full, 9999px));
+
+		&--active {
+			background-color: var(--origam-tabs__item--pills--active---background-color, var(--origam-color__action--primary---bg, currentColor));
+			color: var(--origam-tabs__item--pills--active---color, var(--origam-color__action--primary---fg, white));
+		}
+	}
+</style>
+
+<style>
+	:root {
+		--origam-tabs__item---height: 48px;
+		--origam-tabs__item---padding-inline: 16px;
+		--origam-tabs__item---padding-block: 0;
+		--origam-tabs__item---gap: 8px;
+		--origam-tabs__item---font-size: 0.875rem;
+		--origam-tabs__item---font-weight: 500;
+		--origam-tabs__item---letter-spacing: 0.03125em;
+		--origam-tabs__item---text-transform: none;
+		--origam-tabs__item---color: currentColor;
+		--origam-tabs__item---background-color: transparent;
+		--origam-tabs__item---border-width: 0;
+		--origam-tabs__item---border-radius: 0;
+		--origam-tabs__item---transition-duration: 0.2s;
+		--origam-tabs__item---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+
+		--origam-tabs__indicator---color: currentColor;
+		--origam-tabs__indicator---height: 2px;
+	}
+</style>

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

@@ -0,0 +1,112 @@
+<template>
+	<Transition
+			:name="transitionName"
+			mode="out-in"
+	>
+		<component
+				:is="tag"
+				v-show="isShown"
+				:id="panelDomId"
+				ref="rootRef"
+				role="tabpanel"
+				:tabindex="0"
+				:aria-labelledby="tabLabelledBy"
+				:hidden="!isShown || undefined"
+				:class="panelClasses"
+				:style="panelStyles"
+		>
+			<slot
+					v-if="hasContent"
+					name="default"
+			/>
+		</component>
+	</Transition>
+</template>
+
+<script setup>
+import { computed, inject, ref, StyleValue } from "vue";
+import {
+  useGroupItem,
+  useLazy,
+  useProps,
+  useStyle
+} from "../../composables";
+import { ORIGAM_TABS_KEY, ORIGAM_TAB_PANELS_KEY, ORIGAM_TAB_PANELS_CTX_KEY } from "../../consts";
+const props = defineProps({
+  tag: { type: String, required: false, default: "div" },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  value: { type: null, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false },
+  selectedClass: { type: String, required: false },
+  eager: { type: Boolean, required: false, default: false }
+});
+const { filterProps } = useProps(props);
+const rootRef = ref();
+const groupItem = useGroupItem(props, ORIGAM_TAB_PANELS_KEY);
+const tabsGroup = inject(ORIGAM_TABS_KEY, null);
+const panelsCtx = inject(ORIGAM_TAB_PANELS_CTX_KEY, null);
+if (!groupItem) {
+  throw new Error("[Origam] <OrigamTabPanel> must be used inside an <OrigamTabPanels>");
+}
+const panelDomId = computed(() => `origam-tab-panel-${groupItem.id}`);
+const tabLabelledBy = computed(() => {
+  if (!tabsGroup) return void 0;
+  const tab = tabsGroup.items.value.find((item) => item.value === groupItem.value.value);
+  return tab ? `origam-tab-${tab.id}` : void 0;
+});
+const isShown = computed(() => groupItem.isSelected.value);
+const { hasContent } = useLazy({ eager: !!props.eager }, isShown);
+const transitionName = computed(() => {
+  const t = panelsCtx?.transition.value;
+  if (t === false) return "";
+  return t || "fade";
+});
+const panelStyles = computed(() => {
+  return [
+    props.style
+  ];
+});
+const panelClasses = computed(() => {
+  return [
+    "origam-tab-panel",
+    groupItem.selectedClass.value,
+    props.class
+  ];
+});
+const { id, css, load, isLoaded, unload } = useStyle(panelStyles);
+defineExpose({
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-tab-panel {
+		flex: 1 1 auto;
+		min-height: 0;
+		min-width: 0;
+		width: 100%;
+		outline: none;
+
+		&:focus-visible {
+			outline: 2px solid var(--origam-tab-panels__panel--focus---outline-color, currentColor);
+			outline-offset: -2px;
+		}
+	}
+
+	.fade-enter-active,
+	.fade-leave-active {
+		transition: opacity var(--origam-tab-panels__panel---transition-duration, 0.18s) ease;
+	}
+
+	.fade-enter-from,
+	.fade-leave-to {
+		opacity: 0;
+	}
+</style>

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>