origam 0.3.10 → 2.2.1

package/dist/src/components/Switch/OrigamSwitchTrack.vue

@@ -0,0 +1,181 @@
+<template>
+	<div
+			:class="switchTrackClasses"
+			:style="switchTrackStyles"
+			@click="handleClick"
+	>
+		<div
+				v-if="slots['track.true']"
+				key="prepend"
+				class="origam-switch-track__true"
+		>
+			<slot
+					name="track.true"
+					v-bind="slotProps"
+			/>
+		</div>
+
+		<div
+				v-if="slots['track.false']"
+				key="append"
+				class="origam-switch-track__false"
+		>
+			<slot
+					name="track.false"
+					v-bind="slotProps"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { computed, StyleValue, useSlots } from "vue";
+import {
+  useBackgroundColor,
+  useProps,
+  useStyle
+} from "../../composables";
+const props = defineProps({
+  modelValue: { type: Boolean, required: false, default: false },
+  isValid: { type: [Boolean, null], required: false, default: null },
+  disabled: { type: Boolean, required: false, default: false },
+  readonly: { type: Boolean, required: false, default: false },
+  error: { type: Boolean, required: false, default: false },
+  inset: { 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 },
+  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true }
+});
+const emits = defineEmits(["click", "update:modelValue"]);
+defineSlots();
+const { filterProps } = useProps(props);
+const slots = useSlots();
+const trackBgColor = computed(() => {
+  if (props.disabled || props.error) return void 0;
+  return props.bgColor;
+});
+const { backgroundColorStyles } = useBackgroundColor(trackBgColor);
+const slotProps = computed(() => ({
+  model: props.modelValue,
+  isValid: props.isValid
+}));
+const handleClick = (e) => {
+  if (props.disabled || props.readonly) return;
+  e.stopPropagation();
+  e.preventDefault();
+  emits("click", e);
+};
+const switchTrackStyles = computed(() => {
+  return [
+    backgroundColorStyles.value,
+    props.style
+  ];
+});
+const switchTrackClasses = computed(() => {
+  return [
+    "origam-switch-track",
+    {
+      "origam-switch-track--dirty": props.modelValue,
+      "origam-switch-track--disabled": props.disabled,
+      "origam-switch-track--readonly": props.readonly,
+      "origam-switch-track--error": props.error,
+      "origam-switch-track--inset": props.inset
+    },
+    props.class
+  ];
+});
+const { id, css, load, isLoaded, unload } = useStyle(switchTrackStyles);
+defineExpose({
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-switch-track {
+		$this: &;
+
+		display: inline-flex;
+		align-items: center;
+		font-size: 0.5rem;
+		padding: 0 5px;
+		background-color: var(--origam-switch__track---background-color, rgb(163, 163, 163));
+		border-radius: 9999px;
+		height: 14px;
+		opacity: 0.6;
+		min-width: 36px;
+		cursor: pointer;
+		transition: 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1);
+
+		@media (forced-colors: active) {
+			border: 1px solid;
+			color: buttontext;
+			transition: none;
+		}
+
+		&__true {
+			margin-inline-end: auto;
+		}
+
+		&__false {
+			margin-inline-start: auto;
+		}
+
+		&:not(#{$this}--dirty) {
+			#{$this}__true {
+				opacity: 0;
+			}
+		}
+
+		&--dirty {
+			#{$this}__false {
+				opacity: 0;
+			}
+		}
+
+		&--disabled {
+			cursor: default;
+		}
+
+		&--dirty#{$this}--disabled {
+			background-color: var(--origam-switch__track---background-color-disabled, rgb(163, 163, 163));
+		}
+
+		&--error {
+			&:not(#{$this}--disabled) {
+				background-color: rgba(255, 0, 0, 1);
+				color: rgba(255, 255, 255, 1);
+			}
+		}
+
+		&--inset {
+			border-radius: 9999px;
+			font-size: 0.75rem;
+			height: 32px;
+			min-width: 52px;
+
+			@media (forced-colors: active) {
+				border-width: 2px;
+			}
+		}
+
+		@media (forced-colors: active) {
+			&--dirty {
+				background-color: highlight;
+				color: highlight;
+			}
+		}
+	}
+</style>
+
+<style>
+	:root {
+
+	}
+</style>

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

@@ -9,5 +9,12 @@ Object.defineProperty(exports, "OrigamSwitch", {
     return _OrigamSwitch.default;
   }
 });
+Object.defineProperty(exports, "OrigamSwitchTrack", {
+  enumerable: true,
+  get: function () {
+    return _OrigamSwitchTrack.default;
+  }
+});
 var _OrigamSwitch = _interopRequireDefault(require("./OrigamSwitch.vue"));
+var _OrigamSwitchTrack = _interopRequireDefault(require("./OrigamSwitchTrack.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

@@ -1 +1,2 @@
 export { default as OrigamSwitch } from './OrigamSwitch.vue';
+export { default as OrigamSwitchTrack } from './OrigamSwitchTrack.vue';

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

@@ -1 +1,2 @@
 export { default as OrigamSwitch } from "./OrigamSwitch.vue";
+export { default as OrigamSwitchTrack } from "./OrigamSwitchTrack.vue";

package/dist/src/components/SystemBar/OrigamSystemBar.vue

@@ -18,7 +18,8 @@ import {
   useLayoutItem,
   useProps,
   useRounded,
-  useSsrBoot
+  useSsrBoot,
+  useStyle
 } from "../../composables";
 const props = defineProps({
   window: { type: Boolean, required: false },
@@ -29,15 +30,11 @@ const props = defineProps({
   elevation: { type: [Number, 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 },
   name: { type: String, required: false },
-  order: { type: [String, Number], required: true },
+  order: { type: [String, Number], required: false },
   absolute: { type: Boolean, required: false },
   location: { type: null, required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true },
+  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 },
@@ -63,7 +60,7 @@ const { dimensionStyles } = useDimension(props);
 const { borderClasses, borderStyles } = useBorder(props);
 const { roundedStyles, roundedClasses } = useRounded(props);
 const { elevationClasses } = useElevation(props);
-const { colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { ssrBootStyles } = useSsrBoot();
 const height = computed(() => props.height ?? (props.window ? 32 : 24));
 const { layoutItemStyles } = useLayoutItem({
@@ -92,39 +89,47 @@ const systemBarClasses = computed(() => {
     {
       "origam-system-bar--window": props.window
     },
+    colorClasses.value,
     borderClasses.value,
     roundedClasses.value,
     elevationClasses.value,
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(systemBarStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
 <style lang="scss" scoped>
 	.origam-system-bar {
-		align-items: center;
-		display: flex;
-		flex: 1 1 auto;
-		height: 24px;
-		justify-content: flex-end;
-		max-width: 100%;
-		padding-inline: 8px;
-		position: relative;
-		text-align: end;
-		width: 100%;
-		background: rgba(66, 66, 66, 1);
-		color: rgba(255, 255, 255, 1);
-		font-size: .75rem;
-		font-weight: 400;
-		letter-spacing: .0333333333em;
-		line-height: 1.667;
-		text-transform: none;
+		align-items: var(--origam-system-bar---align-items, center);
+		box-sizing: var(--origam-system-bar---box-sizing, border-box);
+		display: var(--origam-system-bar---display, flex);
+		flex: var(--origam-system-bar---flex, 1 1 auto);
+		height: var(--origam-system-bar---height, 24px);
+		justify-content: var(--origam-system-bar---justify-content, flex-end);
+		max-width: var(--origam-system-bar---max-width, 100%);
+		padding-inline: var(--origam-system-bar---padding-inline, 8px);
+		position: var(--origam-system-bar---position, relative);
+		text-align: var(--origam-system-bar---text-align, end);
+		width: var(--origam-system-bar---width, 100%);
+		background: var(--origam-system-bar---background, var(--origam-color__neutral---700, #404040));
+		color: var(--origam-system-bar---color, var(--origam-color__text---inverse, #FFFFFF));
+		font-size: var(--origam-system-bar---font-size, .75rem);
+		font-weight: var(--origam-system-bar---font-weight, 400);
+		letter-spacing: var(--origam-system-bar---letter-spacing, .0333333333em);
+		line-height: var(--origam-system-bar---line-height, 1.667);
+		text-transform: var(--origam-system-bar---text-transform, none);
 
 		.origam-icon {
-			opacity: 0.7;
+			opacity: var(--origam-system-bar__icon---opacity, 0.7);
 		}
 
 		&--absolute {
@@ -136,17 +141,35 @@ defineExpose({
 		}
 
 		&--rounded {
-			border-radius: 0;
+			border-radius: var(--origam-radius---2xl, 24px);
 		}
 
-		&--window {
-			height: 32px;
+		&--rounded-x-small {
+			border-radius: var(--origam-radius---xs, 2px);
+		}
+
+		&--rounded-small {
+			border-radius: var(--origam-radius---sm, 4px);
+		}
+
+		&--rounded-default {
+			border-radius: var(--origam-radius---md, 8px);
 		}
-	}
-</style>
 
-<style>
-	:root {
+		&--rounded-medium {
+			border-radius: var(--origam-radius---lg, 12px);
+		}
+
+		&--rounded-large {
+			border-radius: var(--origam-radius---xl, 16px);
+		}
 
+		&--rounded-x-large {
+			border-radius: var(--origam-radius---2xl, 24px);
+		}
+
+		&--window {
+			height: var(--origam-system-bar---height-window, 32px);
+		}
 	}
 </style>

package/dist/src/components/Table/OrigamTable.vue

@@ -3,6 +3,8 @@
 			:is="tag"
 			:class="tableClasses"
 			:style="tableStyles"
+			@mouseenter="onMouseenter"
+			@mouseleave="onMouseleave"
 	>
 		<slot name="top"/>
 
@@ -24,14 +26,12 @@
 <script setup>
 import { computed, StyleValue, useSlots } from "vue";
 import {
-  useBorder,
   useDensity,
   useDimension,
-  useElevation,
-  useMargin,
-  usePadding,
+  useHover,
   useProps,
-  useRounded
+  useStateEffect,
+  useStyle
 } from "../../composables";
 import { DENSITY } from "../../enums";
 const props = defineProps({
@@ -49,7 +49,7 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true },
+  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 },
@@ -69,7 +69,7 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
-  hover: { type: Boolean, required: false },
+  hover: { type: [Boolean, Object], required: false },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },
@@ -83,11 +83,18 @@ const { filterProps } = useProps(props);
 const slots = useSlots();
 const { densityClasses } = useDensity(props);
 const { dimensionStyles } = useDimension(props);
-const { borderClasses, borderStyles } = useBorder(props);
-const { roundedStyles, roundedClasses } = useRounded(props);
-const { elevationClasses } = useElevation(props);
-const { paddingStyles, paddingClasses } = usePadding(props);
-const { marginClasses, marginStyles } = useMargin(props);
+const { isHover, hoverState, hoverClasses, onMouseenter, onMouseleave } = useHover(props);
+const {
+  borderClasses,
+  borderStyles,
+  roundedClasses,
+  roundedStyles,
+  elevationClasses,
+  paddingClasses,
+  paddingStyles,
+  marginClasses,
+  marginStyles
+} = useStateEffect(props, isHover, void 0, hoverState);
 const tableStyles = computed(() => {
   return [
     borderStyles.value,
@@ -107,6 +114,7 @@ const tableClasses = computed(() => {
       "origam-table--has-bottom": slots.bottom
     },
     densityClasses.value,
+    hoverClasses.value,
     borderClasses.value,
     roundedClasses.value,
     elevationClasses.value,
@@ -127,7 +135,128 @@ const tableWrapperClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(tableStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
+
+<style lang="scss" scoped>
+	.origam-table {
+		background-color: var(--origam-table---background-color, var(--origam-color__surface---default));
+		color: var(--origam-table---color, var(--origam-color__text---primary));
+		font-size: var(--origam-table---font-size, 0.875rem);
+		border-radius: var(--origam-table---border-radius, 0);
+		overflow: hidden;
+
+		&__wrapper {
+			overflow-x: auto;
+
+			table {
+				border-collapse: var(--origam-table---border-collapse, collapse);
+				width: 100%;
+			}
+
+			:deep(th) {
+				background-color: var(--origam-table__header-cell---background-color, var(--origam-color__surface---overlay));
+				color: var(--origam-table__header-cell---color, var(--origam-color__text---primary));
+				font-weight: var(--origam-table__header-cell---font-weight, 600);
+				padding-block: var(--origam-table__header-cell---padding-block, 12px);
+				padding-inline: var(--origam-table__header-cell---padding-inline, 16px);
+				border-bottom: var(--origam-table__header-cell---border-bottom-width, 2px) solid var(--origam-table__header-cell---border-bottom-color, var(--origam-color__border---default));
+				text-align: start;
+			}
+
+			:deep(td) {
+				padding-block: var(--origam-table__cell---padding-block, 12px);
+				padding-inline: var(--origam-table__cell---padding-inline, 16px);
+				border-bottom: var(--origam-table__cell---border-width, 1px) solid var(--origam-table__cell---border-color, var(--origam-color__border---subtle));
+			}
+
+			:deep(tr:hover td) {
+				background-color: var(--origam-table__row---hover-background-color, var(--origam-color__surface---sunken));
+			}
+		}
+
+		&--density-compact {
+			--origam-table__header-cell---padding-block: 6px;
+			--origam-table__header-cell---padding-inline: 8px;
+			--origam-table__cell---padding-block: 6px;
+			--origam-table__cell---padding-inline: 8px;
+		}
+
+		&--density-default {
+			--origam-table__header-cell---padding-block: 12px;
+			--origam-table__header-cell---padding-inline: 16px;
+			--origam-table__cell---padding-block: 12px;
+			--origam-table__cell---padding-inline: 16px;
+		}
+
+		&--density-comfortable {
+			--origam-table__header-cell---padding-block: 18px;
+			--origam-table__header-cell---padding-inline: 24px;
+			--origam-table__cell---padding-block: 18px;
+			--origam-table__cell---padding-inline: 24px;
+		}
+
+		&--rounded {
+			--origam-table---border-radius: var(--origam-table--rounded---border-radius, 4px);
+		}
+
+		&--rounded-x-small {
+			--origam-table---border-radius: var(--origam-radius---xs, 2px);
+		}
+
+		&--rounded-small {
+			--origam-table---border-radius: var(--origam-radius---sm, 4px);
+		}
+
+		&--rounded-default {
+			--origam-table---border-radius: var(--origam-radius---md, 8px);
+		}
+
+		&--rounded-medium {
+			--origam-table---border-radius: var(--origam-radius---lg, 12px);
+		}
+
+		&--rounded-large {
+			--origam-table---border-radius: var(--origam-radius---xl, 16px);
+		}
+
+		&--rounded-x-large {
+			--origam-table---border-radius: var(--origam-radius---2xl, 24px);
+		}
+
+		&--fixed-header {
+			.origam-table__wrapper {
+				overflow-y: auto;
+			}
+
+			:deep(thead th) {
+				position: sticky;
+				top: 0;
+				z-index: 1;
+				background-color: var(--origam-table__header-cell---background-color, var(--origam-color__surface---overlay));
+			}
+		}
+
+		&--fixed-footer {
+			.origam-table__wrapper {
+				overflow-y: auto;
+			}
+
+			:deep(tfoot td),
+			:deep(tfoot th) {
+				position: sticky;
+				bottom: 0;
+				z-index: 1;
+				background-color: var(--origam-table__header-cell---background-color, var(--origam-color__surface---overlay));
+			}
+		}
+	}
+</style>