@onereach/ui-components 2.69.7-beta.2170.0 → 2.69.7-beta.2172.0

package/dist/esm/v3/useSlicedAttrs-91deb3b7.js

@@ -0,0 +1,31 @@
+import { getCurrentInstance, computed, isVue2 } from 'vue-demi';
+import ommit from 'lodash/omit';
+import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
+
+function useSlicedAttrs() {
+  const classAttribute = useClassAttribute();
+  const currentInstance = getCurrentInstance();
+  const classes = computed(() => {
+    if (isVue2) {
+      return classAttribute.value;
+    }
+    return currentInstance === null || currentInstance === void 0 ? void 0 : currentInstance.attrs.class;
+  });
+  const styles = computed(() => {
+    var _a, _b;
+    if (isVue2) {
+      return (_b = (_a = currentInstance === null || currentInstance === void 0 ? void 0 : currentInstance.vnode) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.staticStyle;
+    }
+    return currentInstance === null || currentInstance === void 0 ? void 0 : currentInstance.attrs.style;
+  });
+  const attrs = computed(() => {
+    return ommit(currentInstance === null || currentInstance === void 0 ? void 0 : currentInstance.attrs, 'style', 'class');
+  });
+  return {
+    classes,
+    styles,
+    attrs
+  };
+}
+
+export { useSlicedAttrs as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.69.7-beta.2170.0",
+  "version": "2.69.7-beta.2172.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",

package/src/components/index.ts

@@ -53,7 +53,6 @@ export * from './or-notification-v3';
 export * from './or-overflow-menu';
 export * from './or-overlay';
 export * from './or-overlay-v3';
-export * from './or-pagination-v3';
 export * from './or-popover-v3';
 export * from './or-progress';
 export * from './or-progress-v3';

package/src/components/or-button-v3/OrButton.stories3.ts

@@ -36,10 +36,6 @@ export default {
       options: Object.values(ButtonColor),
     },
 
-    activated: {
-      table: { disable: true },
-    },
-
     disabled: {
       control: { type: 'boolean' },
     },

package/src/components/or-button-v3/OrButton.vue

@@ -4,7 +4,6 @@
     v-bind="$attrs"
     :class="rootStyles"
     :type="type"
-    :activated="activated ? '' : null"
     :disabled="disabled"
     @click="$emit('click', $event)"
     @focus="$emit('focus', $event)"
@@ -64,11 +63,6 @@ export default defineComponent({
       default: ButtonColor.Primary,
     },
 
-    activated: {
-      type: Boolean,
-      default: false,
-    },
-
     disabled: {
       type: Boolean,
       default: false,

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

@@ -116,13 +116,5 @@ export const ButtonRootColors: Record<`${ButtonColor}-${ButtonVariant}`, string[
     'dark:theme-preset-4-error-dark',
   ],
 
-  'inherit-link': [
-    // Theme
-    'theme-foreground-inherit',
-    'dark:theme-foreground-inherit',
-
-    // Theme (activated)
-    'activated:theme-foreground-default',
-    'dark:activated:theme-foreground-default-dark',
-  ],
+  'inherit-link': [],
 };

package/src/components/or-input-v3/OrInput.stories3.ts

@@ -218,3 +218,56 @@ Search.args = {
   placeholder: 'Placeholder',
   hint: Faker.lorem.sentence(20),
 };
+
+export const CustomClassesAndStyles: StoryFn<typeof OrInput> = (args) => ({
+  components: {
+    OrIcon,
+    OrInput,
+  },
+
+  setup() {
+    // State
+    const model = ref<string | number>();
+
+    // Effects
+    watch(model, (value) => {
+      console.debug(value);
+    });
+
+    return {
+      args,
+      model,
+      onUpdateModelValue: action('update:modelValue'),
+      onInput: action('input'),
+      onKeydown: action('keydown'),
+      onKeyup: action('keyup'),
+      onFocus: action('focus'),
+      onBlur: action('blur'),
+    };
+  },
+
+  template: `
+    <OrInput
+      v-model="model"
+      v-bind="args"
+      @update:modelValue="onUpdateModelValue"
+      @input="onInput"
+      @keydown="onKeydown"
+      @keyup="onKeyup"
+      @focus="onFocus"
+      @blur="onBlur"
+      class="test"
+      :class="'test1'"
+      style="margin-bottom: 10px"
+      :style="'margin-top: 10px'"
+    />
+  `,
+});
+
+CustomClassesAndStyles.args = {
+  // Slots
+  // Props
+  type: InputType.Text,
+  label: 'Input with margins and styles',
+  placeholder: 'conatcts test classes',
+};

package/src/components/or-input-v3/OrInput.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    :style="inlineStyles"
     :class="rootStyles"
   >
     <template v-if="label">
@@ -29,7 +30,7 @@
         :id="controlId"
         ref="input"
         v-model="proxyModelValue"
-        v-bind="$attrs"
+        v-bind="attrs"
         :class="controlStyles"
         :type="type === 'password' && disclosed ? 'text' : type"
         :placeholder="placeholder"
@@ -103,7 +104,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, getCurrentInstance, PropType, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
+import { useSlicedAttrs } from '../../hooks';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
@@ -206,13 +207,18 @@ export default defineComponent({
     const root = ref<HTMLElement>();
     const input = ref<HTMLInputElement>();
 
-    // Styles
-    const classAttribute = useClassAttribute();
+    // Attrs
+    const {
+      attrs,
+      classes,
+      styles: inlineStyles,
+    } = useSlicedAttrs();
 
+    // Styles
     const rootStyles = computed(() => [
       'or-input',
       ...InputRoot,
-      classAttribute.value,
+      classes.value,
     ]);
 
     const controlStyles = computed(() => [
@@ -249,6 +255,8 @@ export default defineComponent({
     return {
       root,
       input,
+      attrs,
+      inlineStyles,
       rootStyles,
       controlStyles,
       controlId,

package/src/components/or-select-v3/OrSelect.vue

@@ -24,7 +24,6 @@
       v-dropdown-open="toggle"
       v-dropdown-close="close"
       :class="[popoverState === 'open' && 'rounded-b-0']"
-      :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
       :size="size"
       :invalid="invalid"
       :readonly="readonly"
@@ -39,12 +38,12 @@
         @focus="$emit('focus', $event)"
         @blur="$emit('blur', $event)"
       >
-        <template v-if="multiple">
-          <slot
-            name="valueTemplate"
-            :model="proxyModelValue"
-          >
-            <template v-if="proxyModelValue && proxyModelValue.length > 0">
+        <template v-if="proxyModelValue && proxyModelValue.length > 0">
+          <template v-if="multiple">
+            <slot
+              name="valueTemplate"
+              :model="proxyModelValue"
+            >
               <OrTag
                 v-for="option in selection"
                 :key="option.value"
@@ -53,16 +52,10 @@
               >
                 {{ option.label }}
               </OrTag>
-            </template>
-
-            <template v-else>
-              <span :class="placeholderStyles">{{ placeholder }}</span>
-            </template>
-          </slot>
-        </template>
+            </slot>
+          </template>
 
-        <template v-else>
-          <template v-if="proxyModelValue">
+          <template v-else>
             <slot
               name="valueTemplate"
               :model="proxyModelValue"
@@ -70,10 +63,10 @@
               {{ selection.label }}
             </slot>
           </template>
+        </template>
 
-          <template v-else>
-            <span :class="placeholderStyles">{{ placeholder }}</span>
-          </template>
+        <template v-else>
+          <span :class="placeholderStyles">{{ placeholder }}</span>
         </template>
       </div>
 
@@ -272,12 +265,12 @@ export default defineComponent({
     },
 
     modelValue: {
-      type: [String, Number, Array] as PropType<string | number | (string | number)[]>,
+      type: [String, Array] as PropType<string | string[]>,
       default: undefined,
     },
 
     value: { // TODO: Remove Vue 2 fallback
-      type: [String, Number, Array] as PropType<string | number | (string | number)[]>,
+      type: [String, Array] as PropType<string | string[]>,
       default: undefined,
     },
 
@@ -321,11 +314,6 @@ export default defineComponent({
       default: false,
     },
 
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false,
-    },
-
     enableSearch: {
       type: Boolean,
       default: false,

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

@@ -1,3 +1,2 @@
 export { default as OrSelectV3 } from './OrSelect.vue';
 export * from './props';
-export * from './types';

package/src/components/or-select-v3/types.ts

@@ -1,5 +1,5 @@
 export interface SelectOption {
-  value: string | number;
+  value: string;
   label: string;
 }
 

package/src/components/or-switch-v3/OrSwitch.vue

@@ -1,11 +1,12 @@
 <template>
   <div
     ref="root"
+    :style="inlineStyles"
     :class="rootStyles"
   >
     <template v-if="!loading">
       <input
-        v-bind="$attrs"
+        v-bind="attrs"
         :id="controlId"
         v-model="proxyModelValue"
         :class="controlStyles"
@@ -50,7 +51,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, getCurrentInstance, PropType, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
+import { useSlicedAttrs } from '../../hooks';
 import { LabelVariant, OrLabelV3 as OrLabel } from '../or-label-v3';
 import { OrLoaderV3 as OrLoader } from '../or-loader-v3';
 import { SwitchControl, SwitchControlHandle, SwitchLoader, SwitchLoaderHandle, SwitchRoot } from './styles';
@@ -125,13 +126,19 @@ export default defineComponent({
     // Refs
     const root = ref<HTMLElement>();
 
+    // Attrs
+    const {
+      attrs,
+      classes,
+      styles: inlineStyles,
+    } = useSlicedAttrs();
+
     // Styles
-    const classAttribute = useClassAttribute();
 
     const rootStyles = computed(() => [
       'or-switch',
       ...SwitchRoot,
-      classAttribute.value,
+      classes.value,
     ]);
 
     const controlStyles = computed(() => [
@@ -163,6 +170,8 @@ export default defineComponent({
       rootStyles,
       controlStyles,
       loaderStyles,
+      inlineStyles,
+      attrs,
       controlId,
       proxyModelValue,
     };

package/src/hooks/index.ts

@@ -2,4 +2,5 @@ export { useClassAttribute } from './useClassAttribute';
 export { useElevation } from './useElevation';
 export { useOverflow } from './useOverflow';
 export { useResponsive } from './useResponsive';
+export { useSlicedAttrs } from './useSlicedAttrs';
 export { default as useToggle } from './useToggle';

package/src/hooks/useSlicedAttrs.ts

@@ -0,0 +1,31 @@
+import { computed, isVue2, getCurrentInstance } from 'vue-demi';
+import ommit from 'lodash/omit';
+import { useClassAttribute } from './useClassAttribute';
+export function useSlicedAttrs() {
+  const classAttribute = useClassAttribute();
+  const currentInstance = getCurrentInstance();
+
+  const classes = computed(() => {
+    if (isVue2) {
+      return classAttribute.value;
+    }
+    return currentInstance?.attrs.class;
+  });
+
+  const styles = computed(() => {
+    if (isVue2) {
+      return currentInstance?.vnode?.data?.staticStyle;
+    }
+    return currentInstance?.attrs.style;
+  });
+
+  const attrs = computed(() => {
+    return ommit(currentInstance?.attrs, 'style', 'class');
+  });
+
+  return {
+    classes,
+    styles,
+    attrs,
+  };
+}