@onereach/ui-components 2.56.1-beta.1824.0 → 2.57.0-beta.1809.0

package/src/components/or-fab-v3/OrFab.vue

@@ -0,0 +1,65 @@
+<template>
+  <button
+    ref="root"
+    v-bind="$attrs"
+    :class="rootStyles"
+    :type="'button'"
+    :disabled="disabled"
+  >
+    <OrIcon
+      :icon="icon"
+      :size="'l'"
+    />
+  </button>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { OrIconV3 as OrIcon } from '../or-icon-v3';
+import { FabColor } from './props';
+import { FabRoot, FabRootColors } from './styles';
+
+export default defineComponent({
+  name: 'OrFab',
+
+  components: {
+    OrIcon,
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    icon: {
+      type: String,
+      required: true,
+    },
+
+    color: {
+      type: String as PropType<FabColor>,
+      default: FabColor.Primary,
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  setup(props) {
+    // Refs
+    const root = ref<HTMLElement>();
+
+    // Styles
+    const rootStyles = computed(() => [
+      'or-fab',
+      ...FabRoot,
+      ...FabRootColors[props.color],
+    ]);
+
+    return {
+      root,
+      rootStyles,
+    };
+  },
+});
+</script>

package/src/components/or-fab-v3/index.ts

@@ -0,0 +1,2 @@
+export { default as OrFabV3 } from './OrFab.vue';
+export * from './props';

package/src/components/or-fab-v3/props.ts

@@ -0,0 +1,4 @@
+export enum FabColor {
+  Primary = 'primary',
+  Danger = 'danger',
+}

package/src/components/or-fab-v3/styles.ts

@@ -0,0 +1,33 @@
+import { FabColor } from './props';
+
+export const FabRoot: string[] = [
+  // Layout
+  'flex',
+  'justify-center',
+  'items-center',
+
+  // Box
+  'rounded-full',
+
+  // Sizing
+  'px-md',
+  'py-md',
+
+  // Theme
+  'shadow-button',
+  'dark:shadow-button-dark',
+];
+
+export const FabRootColors: Record<FabColor, string[]> = {
+  'primary': [
+    // Theme
+    'theme-preset-1-primary',
+    'dark:theme-preset-1-primary-dark',
+  ],
+
+  'danger': [
+    // Theme
+    'theme-preset-1-error',
+    'dark:theme-preset-1-error-dark',
+  ],
+};

package/src/components/or-icon-button-v3/OrIconButton.vue

@@ -10,7 +10,10 @@
       @focus="$emit('focus', $event)"
       @blur="$emit('blur', $event)"
     >
-      <OrIcon v-bind="typeof icon === 'string' ? { icon } : icon" />
+      <OrIcon
+        v-bind="typeof icon === 'string' ? { icon } : icon"
+        :variant="'inherit'"
+      />
     </button>
   </OrTooltip>
 </template>

package/src/components/or-toast-v3/styles.ts

@@ -10,7 +10,7 @@ export const ToastRoot = [
   'w-[343px] md:w-[512px]',
   'rounded-md',
 
-  // Spacing
+  // Sizing
   'px-md',
   'py-md',
   'gap-[16px]',
@@ -42,7 +42,7 @@ export const ToastContainer = [
 
   'items-center',
 
-  // Spacing
+  // Sizing
   'gap-[8px]',
 
   // Overflow