origam 0.2.0 → 0.3.2

package/dist/src/components/Badge/OrigamBadge.vue

@@ -0,0 +1,368 @@
+<template>
+	<component
+			:is="tag"
+			:class="badgeClasses"
+			:style="badgeStyles"
+			v-bind="restAttrs"
+			@mouseenter="handleMouseenter"
+			@mouseleave="handleMouseleave"
+	>
+		<div class="origam-badge__wrapper">
+			<slot name="default"/>
+
+			<origam-transition :transition="transition">
+        <span
+		        v-show="modelValue"
+		        :id="id"
+		        :aria-label="t(label, content)"
+		        aria-atomic="true"
+		        aria-live="polite"
+		        class="origam-badge__badge"
+		        role="status"
+		        v-bind="badgeAttrs"
+        >
+          <template v-if="!dot">
+            <slot name="badge">
+              <template v-if="hasIcon">
+                <origam-icon :icon="icon"/>
+              </template>
+              <template v-else>
+                {{ content }}
+              </template>
+            </slot>
+          </template>
+        </span>
+			</origam-transition>
+		</div>
+	</component>
+</template>
+
+<script setup>
+import { OrigamIcon, OrigamScaleRotate, OrigamTransition } from "@/components";
+import {
+  useActive,
+  useBorder,
+  useColorEffect,
+  useElevation,
+  useHover,
+  useLocale,
+  useLocation,
+  useProps,
+  useRounded,
+  useStatus,
+  useStyle
+} from "@/composables";
+import { omit, pick } from "@/utils";
+import { computed, ComputedRef, ref, StyleValue, useAttrs } from "vue";
+const props = defineProps({
+  content: { type: [Number, String], required: false },
+  dot: { type: Boolean, required: false },
+  floating: { type: Boolean, required: false },
+  inline: { type: Boolean, required: false },
+  label: { type: String, required: false, default: "origam.badge" },
+  max: { type: [Number, String], required: false },
+  modelValue: { type: Boolean, required: false },
+  offsetX: { type: [Number, String], required: false },
+  offsetY: { type: [Number, String], 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 },
+  tag: { type: String, required: false, default: "div" },
+  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
+  borderTop: { type: [Boolean, Number, String], required: false },
+  borderLeft: { type: [Boolean, Number, String], required: false },
+  borderBottom: { type: [Boolean, Number, String], required: false },
+  borderRight: { type: [Boolean, Number, String], required: false },
+  borderBlock: { type: [Boolean, Number, String], required: false },
+  borderInline: { type: [Boolean, Number, String], required: false },
+  borderColor: { type: String, required: false },
+  borderStyle: { type: String, required: false },
+  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  location: { type: null, required: false, default: "top right" },
+  rounded: { type: [Boolean, String, Number, 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 },
+  transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamScaleRotate }) },
+  disabled: { type: Boolean, required: false },
+  status: { type: null, required: false },
+  statusIconPosition: { type: null, required: false },
+  icon: { type: null, required: false },
+  hover: { type: Boolean, required: false },
+  elevation: { type: [Number, String], required: false }
+});
+const { filterProps } = useProps(props);
+const { t } = useLocale();
+const attrs = useAttrs();
+const { hoverClasses, isHover, onMouseleave: handleMouseleave, onMouseenter: handleMouseenter } = useHover(props);
+const { activeClasses, isActive } = useActive(props, "modelValue");
+const { colorStyles, bgColor } = useColorEffect(props, isHover, isActive);
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { borderClasses, borderStyles } = useBorder(props);
+const { elevationClasses, elevationStyles } = useElevation(props, ref(false), bgColor);
+const { icon, statusClasses } = useStatus(props);
+const { locationStyles } = useLocation(props, true, (side) => {
+  const base = props.floating ? props.dot ? 2 : 4 : props.dot ? 8 : 12;
+  return base + (["top", "bottom"].includes(side) ? +(props.offsetY ?? 0) : ["left", "right"].includes(side) ? +(props.offsetX ?? 0) : 0);
+});
+const hasIcon = computed(() => {
+  return !!icon.value;
+});
+const content = computed(() => {
+  const value = Number(props.content);
+  if (!props.max || isNaN(value)) {
+    return props.content;
+  } else if (value <= +props.max) {
+    return value;
+  }
+  return `${props.max}+`;
+});
+const badgeAttrs = computed(() => {
+  return pick(attrs, [
+    "aria-atomic",
+    "aria-label",
+    "aria-live",
+    "role",
+    "title"
+  ]);
+});
+const restAttrs = computed(() => {
+  return omit(attrs, [
+    "aria-atomic",
+    "aria-label",
+    "aria-live",
+    "role",
+    "title"
+  ]);
+});
+const badgeStyles = computed(() => {
+  return [
+    props.style
+  ];
+});
+const badgeClasses = computed(() => {
+  return [
+    "origam-badge",
+    {
+      "origam-badge--dot": props.dot,
+      "origam-badge--floating": props.floating,
+      "origam-badge--inline": props.inline
+    },
+    elevationClasses.value,
+    activeClasses.value,
+    hoverClasses.value,
+    roundedClasses.value,
+    borderClasses.value,
+    statusClasses.value,
+    props.class
+  ];
+});
+const badgeContentStyles = computed(() => {
+  return [
+    elevationStyles.value,
+    colorStyles.value,
+    roundedStyles.value,
+    borderStyles.value,
+    props.inline ? {} : locationStyles.value
+  ];
+});
+const { id, css, load, isLoaded, unload } = useStyle(badgeContentStyles);
+defineExpose({
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-badge {
+		$this: &;
+
+		display: inline-flex;
+		line-height: 1;
+
+		&__badge {
+			align-items: center;
+			justify-content: center;
+			display: inline-flex;
+
+			position: var(--origam-badge__badge---position);
+			pointer-events: var(--origam-badge__badge---pointer-events);
+			transition: var(--origam-badge__badge---transition);
+
+			border-width: var(--origam-badge__badge---border-width);
+			border-style: var(--origam-badge__badge---border-style);
+			border-color: var(--origam-badge__badge---border-color);
+			border-radius: var(--origam-badge__badge---border-radius);
+
+			font-size: var(--origam-badge__badge---font-size);
+			font-weight: var(--origam-badge__badge---font-weight);
+			text-align: var(--origam-badge__badge---text-align);
+			text-indent: var(--origam-badge__badge---text-indent);
+			white-space: var(--origam-badge__badge---white-space);
+
+			height: var(--origam-badge__badge---height);
+			min-width: var(--origam-badge__badge---min-width);
+
+			padding-block-start: var(--origam-badge__badge---padding-block-start);
+			padding-block-end: var(--origam-badge__badge---padding-block-end);
+			padding-inline-start: var(--origam-badge__badge---padding-inline-start);
+			padding-inline-end: var(--origam-badge__badge---padding-inline-end);
+			margin-block-start: var(--origam-badge__badge---margin-block-start);
+			margin-block-end: var(--origam-badge__badge---margin-block-end);
+			margin-inline-start: var(--origam-badge__badge---margin-inline-start);
+			margin-inline-end: var(--origam-badge__badge---margin-inline-end);
+
+			background-color: var(--origam-badge__badge---background-color);
+			color: var(--origam-badge__badge---color);
+
+			:deep(.origam-icon) {
+				color: inherit;
+				font-size: 0.75rem;
+				margin: 0 -2px;
+			}
+
+			:deep(img),
+			:deep(.origam-img) {
+				height: 100%;
+				width: 100%;
+			}
+		}
+
+		&__wrapper {
+			position: relative;
+
+			display: var(--origam-badge__wrapper---display);
+			align-items: var(--origam-badge__wrapper---align-items);
+			justify-content: var(--origam-badge__wrapper---justify-content);
+
+			padding-block-start: var(--origam-badge__wrapper---padding-block-start);
+			padding-block-end: var(--origam-badge__wrapper---padding-block-end);
+			padding-inline-start: var(--origam-badge__wrapper---padding-inline-start);
+			padding-inline-end: var(--origam-badge__wrapper---padding-inline-end);
+			margin-block-start: var(--origam-badge__wrapper---margin-block-start);
+			margin-block-end: var(--origam-badge__wrapper---margin-block-end);
+			margin-inline-start: var(--origam-badge__wrapper---margin-inline-start);
+			margin-inline-end: var(--origam-badge__wrapper---margin-inline-end);
+		}
+
+		&--elevated {
+			#{$this}__badge {
+				--origam-badge__badge---box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
+			}
+		}
+
+		&--border {
+			#{$this}__badge {
+				--origam-badge__badge---border-width: 2px;
+			}
+		}
+
+		&--dot {
+			#{$this}__badge {
+				--origam-badge__badge---border-width: 1.5px;
+				--origam-badge__badge---border-radius: 4.5px;
+				--origam-badge__badge---height: 9px;
+				--origam-badge__badge---width: 9px;
+				--origam-badge__badge---min-width: 0;
+				--origam-badge__badge---padding-block: 0;
+				--origam-badge__badge---padding-inline: 0;
+				--origam-badge__badge---text-indent: -9999px;
+			}
+		}
+
+		&--inline {
+			#{$this}__badge {
+				--origam-badge__badge---position: relative;
+				vertical-align: middle;
+			}
+
+			#{$this}__wrapper {
+				--origam-badge__wrapper---display: inline-flex;
+				--origam-badge__wrapper---align-items: center;
+				--origam-badge__wrapper---justify-content: center;
+				--origam-badge__wrapper---margin-inline: 4px;
+			}
+		}
+
+		&--warning {
+			--origam-badge__badge---background-color: var(--origam-status--warning---background-color, rgb(251, 140, 0));
+			--origam-badge__badge---color: var(--origam-status--warning---color, #ffffff);
+		}
+
+		&--success {
+			--origam-badge__badge---background-color: var(--origam-status--success---background-color, rgb(76, 175, 80));
+			--origam-badge__badge---color: var(--origam-status--success---color, #ffffff);
+		}
+
+		&--info {
+			--origam-badge__badge---background-color: var(--origam-status--info---background-color, rgb(33, 150, 243));
+			--origam-badge__badge---color: var(--origam-status--info---color, #ffffff);
+		}
+
+		&--error {
+			--origam-badge__badge---background-color: var(--origam-status--error---background-color, rgb(207, 102, 121));
+			--origam-badge__badge---color: var(--origam-status--error---color, #ffffff);
+		}
+	}
+</style>
+
+<style>
+	:root {
+		--origam-badge__wrapper---display: flex;
+		--origam-badge__wrapper---align-items: stretch;
+		--origam-badge__wrapper---justify-content: start;
+		--origam-badge__wrapper---margin-inline-start: 0;
+		--origam-badge__wrapper---margin-inline-end: 0;
+		--origam-badge__wrapper---margin-block-start: 0;
+		--origam-badge__wrapper---margin-block-end: 0;
+		--origam-badge__wrapper---padding-block-start: 0;
+		--origam-badge__wrapper---padding-block-end: 0;
+		--origam-badge__wrapper---padding-inline-start: 0;
+		--origam-badge__wrapper---padding-inline-end: 0;
+
+		--origam-badge__badge---align-items: center;
+		--origam-badge__badge---justify-content: center;
+		--origam-badge__badge---display: inline-flex;
+		--origam-badge__badge---position: absolute;
+		--origam-badge__badge---font-size: 0.75rem;
+		--origam-badge__badge---font-weight: 500;
+		--origam-badge__badge---text-align: center;
+		--origam-badge__badge---text-indent: 0;
+		--origam-badge__badge---white-space: nowrap;
+		--origam-badge__badge---height: 1.25rem;
+		--origam-badge__badge---min-width: 20px;
+		--origam-badge__badge---pointer-events: auto;
+		--origam-badge__badge---transition-duration: 0.225s;
+		--origam-badge__badge---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+		--origam-badge__badge---transition-property: all;
+		--origam-badge__badge---transition: var(--origam-badge__badge---transition-property) var(--origam-badge__badge---transition-duration) var(--origam-badge__badge---transition-timing-function);
+		--origam-badge__badge---margin-inline-start: 0;
+		--origam-badge__badge---margin-inline-end: 0;
+		--origam-badge__badge---margin-block-start: 0;
+		--origam-badge__badge---margin-block-end: 0;
+		--origam-badge__badge---padding-block-start: 4px;
+		--origam-badge__badge---padding-block-end: 4px;
+		--origam-badge__badge---padding-inline-start: 6px;
+		--origam-badge__badge---padding-inline-end: 6px;
+		--origam-badge__badge---color: rgba(30, 30, 30, 0.87);
+		--origam-badge__badge---background-color: rgb(230, 230, 230);
+		--origam-badge__badge---border-top-width: 0;
+		--origam-badge__badge---border-left-width: 0;
+		--origam-badge__badge---border-bottom-width: 0;
+		--origam-badge__badge---border-right-width: 0;
+		--origam-badge__badge---border-width: var(--origam-badge__badge---border-top-width) var(--origam-badge__badge---border-left-width) var(--origam-badge__badge---border-bottom-width) var(--origam-badge__badge---border-right-width);
+		--origam-badge__badge---border-color: currentColor;
+		--origam-badge__badge---border-style: solid;
+		--origam-badge__badge---border-radius: 10px;
+	}
+</style>

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "FoxyBadge", {
+Object.defineProperty(exports, "OrigamBadge", {
   enumerable: true,
   get: function () {
-    return _FoxyBadge.default;
+    return _OrigamBadge.default;
   }
 });
-var _FoxyBadge = _interopRequireDefault(require("./FoxyBadge.vue"));
+var _OrigamBadge = _interopRequireDefault(require("./OrigamBadge.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

@@ -1 +1 @@
-export { default as FoxyBadge } from './FoxyBadge.vue';
+export { default as OrigamBadge } from './OrigamBadge.vue';

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

@@ -1 +1 @@
-export { default as FoxyBadge } from "./FoxyBadge.vue";
+export { default as OrigamBadge } from "./OrigamBadge.vue";

package/dist/src/components/BottomNav/OrigamBottomNav.cy.cjs

@@ -0,0 +1,10 @@
+"use strict";
+
+var _vue = require("vue");
+var _OrigamBottomNav = _interopRequireDefault(require("./OrigamBottomNav.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+describe("<OrigamBottomNav />", () => {
+  it("renders", () => {
+    cy.mount((0, _vue.h)(_OrigamBottomNav.default), {});
+  });
+});

package/dist/src/components/BottomNav/OrigamBottomNav.cy.js

@@ -0,0 +1,7 @@
+import { h } from "vue";
+import OrigamBottomNav from "./OrigamBottomNav.vue";
+describe("<OrigamBottomNav />", () => {
+  it("renders", () => {
+    cy.mount(h(OrigamBottomNav), {});
+  });
+});