@onereach/ui-components 2.62.7-beta.1929.0 → 2.62.7-beta.1930.0

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

@@ -72,16 +72,18 @@
     </OrInputBox>
 
     <template v-if="!invalid">
-      <OrHint :disabled="disabled">
-        {{ hint }}
-
-        <template
-          v-if="maxLength"
-          v-slot:addon
-        >
-          {{ currentLength }} / {{ maxLength }}
-        </template>
-      </OrHint>
+      <template v-if="hint || maxLength">
+        <OrHint :disabled="disabled">
+          {{ hint }}
+
+          <template
+            v-if="maxLength"
+            v-slot:addon
+          >
+            {{ currentLength }} / {{ maxLength }}
+          </template>
+        </OrHint>
+      </template>
     </template>
 
     <template v-else>

package/src/components/or-radio-v3/OrRadio.stories3.ts

@@ -27,7 +27,7 @@ export default {
     },
 
     value: { // TODO: Remove Vue 2 fallback
-      table: { disable: true },
+      control: { type: 'object' },
     },
 
     inputValue: { // TODO: Rename to `value` after complete migration to Vue 3

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

@@ -193,9 +193,11 @@
     </OrInputBox>
 
     <template v-if="!invalid">
-      <OrHint :disabled="disabled">
-        {{ hint }}
-      </OrHint>
+      <template v-if="hint">
+        <OrHint :disabled="disabled">
+          {{ hint }}
+        </OrHint>
+      </template>
     </template>
 
     <template v-else>

package/src/components/or-sort-header-v3/OrSortHeader.docs.mdx

@@ -0,0 +1,3 @@
+import { DocsPage } from '@storybook/addon-docs';
+
+<DocsPage />

package/src/components/or-sort-header-v3/OrSortHeader.stories3.ts

@@ -0,0 +1,132 @@
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryFn } from '@storybook/vue3';
+import { ref, watch } from 'vue-demi';
+import OrSortHeaderDocs from './OrSortHeader.docs.mdx';
+import OrSortHeader from './OrSortHeader.vue';
+import { SortHeaderModel } from './types';
+
+export default {
+  title: 'Components/Sort Header',
+  component: OrSortHeader,
+
+  argTypes: {
+    // Slots
+    default: {
+      type: {
+        name: 'string',
+        required: true,
+      },
+
+      control: { type: 'text' },
+    },
+
+    // Props
+    modelValue: {
+      control: { type: 'object' },
+    },
+
+    value: { // TODO: Remove Vue 2 fallback
+      control: { type: 'object' },
+    },
+
+    inputValue: { // TODO: Rename to `value` after complete migration to Vue 3
+      control: { type: 'text' },
+    },
+
+    // Events
+    'update:modelValue': {
+      table: { disable: true },
+    },
+
+    input: {
+      table: { disable: true },
+    },
+
+    focus: {
+      table: { disable: true },
+    },
+
+    blur: {
+      table: { disable: true },
+    },
+  },
+
+  parameters: {
+    layout: 'centered',
+
+    docs: {
+      page: OrSortHeaderDocs,
+    },
+  },
+
+  decorators: [
+    () => ({
+      template: `
+        <div class="flex flex-row gap-sm">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+} as Meta<typeof OrSortHeader>;
+
+const Template: StoryFn<typeof OrSortHeader> = (args) => ({
+  components: {
+    OrSortHeader,
+  },
+
+  setup() {
+    // State
+    const model = ref<SortHeaderModel>();
+
+    // Effects
+    watch(model, (value) => {
+      console.debug(value);
+    });
+
+    return {
+      args,
+      model,
+      onUpdateModelValue: action('update:modelValue'),
+      onInput: action('input'),
+      onFocus: action('focus'),
+      onBlur: action('blur'),
+    };
+  },
+
+  template: `
+    <div class="contents">
+      <OrSortHeader
+        v-model="model"
+        v-bind="args"
+        @update:modelValue="onUpdateModelValue"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+      >
+        ${args.default}
+      </OrSortHeader>
+
+      <OrSortHeader
+        v-model="model"
+        input-value="column-2"
+        @update:modelValue="onUpdateModelValue"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+      >
+        Column 2
+      </OrSortHeader>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+
+Default.args = {
+  // Slots
+  default: 'Column 1',
+
+  // Props
+  inputValue: 'column-1',
+};

package/src/components/{or-segmented-control-v3/OrSegmentedControl.vue → or-sort-header-v3/OrSortHeader.vue}

@@ -3,61 +3,50 @@
     ref="root"
     v-bind="$attrs"
     :class="rootStyles"
+    :activated="activated ? '' : null"
+    @click.stop="toggleDirection()"
   >
-    <OrSegmentedControlItem
-      v-for="option in options"
-      :key="option.value"
-      :size="size"
-      :selected="option.value === proxyModelValue"
-      :disabled="disabled"
-      @click.stop="proxyModelValue = option.value"
-    >
-      {{ option.label }}
-    </OrSegmentedControlItem>
+    <slot />
+
+    <template v-if="activated">
+      <OrIcon
+        :class="{ 'rotate-180': proxyModelValue.direction === 'asc' }"
+        :icon="'arrow_downward'"
+      />
+    </template>
   </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { useClassAttribute } from '../../hooks';
-import OrSegmentedControlItem from './components/or-segmented-control-item/OrSegmentedControlItem.vue';
-import { SegmentedControlSize } from './props';
-import { SegmentedControlRoot, SegmentedControlRootSizes } from './styles';
-import { SegmentedControlOption } from './types';
+import { OrIconV3 as OrIcon } from '../or-icon-v3';
+import { SortHeaderRoot } from './styles';
+import { SortHeaderModel } from './types';
 
 export default defineComponent({
-  name: 'OrSegmentedControl',
+  name: 'OrSortHeader',
 
   components: {
-    OrSegmentedControlItem,
+    OrIcon,
   },
 
   inheritAttrs: false,
 
   props: {
-    options: {
-      type: Array as PropType<SegmentedControlOption[]>,
-      default: [] as SegmentedControlOption[],
-    },
-
     modelValue: {
-      type: String,
+      type: Object as PropType<SortHeaderModel>,
       default: undefined,
     },
 
     value: { // TODO: Remove Vue 2 fallback
-      type: String,
+      type: Object as PropType<SortHeaderModel>,
       default: undefined,
     },
 
-    size: {
-      type: String as PropType<SegmentedControlSize>,
-      default: SegmentedControlSize.M,
-    },
-
-    disabled: {
-      type: Boolean,
-      default: false,
+    inputValue: { // TODO: Rename to `value` after complete migration to Vue 3
+      type: String,
+      required: true,
     },
   },
 
@@ -65,6 +54,8 @@ export default defineComponent({
     'update:modelValue',
 
     'input',
+    'focus',
+    'blur',
   ],
 
   expose: [
@@ -79,9 +70,8 @@ export default defineComponent({
     const classAttribute = useClassAttribute();
 
     const rootStyles = computed(() => [
-      'or-segmented-control',
-      ...SegmentedControlRoot,
-      ...SegmentedControlRootSizes[props.size],
+      'or-sort-header',
+      ...SortHeaderRoot,
       classAttribute.value,
     ]);
 
@@ -97,10 +87,24 @@ export default defineComponent({
       },
     });
 
+    const activated = computed(() => {
+      return proxyModelValue.value?.column === props.inputValue;
+    });
+
+    // Methods
+    function toggleDirection(): void {
+      proxyModelValue.value = {
+        column: props.inputValue,
+        direction: proxyModelValue.value?.direction === 'asc' ? 'desc' : 'asc',
+      };
+    }
+
     return {
       root,
       rootStyles,
       proxyModelValue,
+      activated,
+      toggleDirection,
     };
   },
 });

package/src/components/or-sort-header-v3/index.ts

@@ -0,0 +1,2 @@
+export { default as OrSortHeaderV3 } from './OrSortHeader.vue';
+export * from './types';

package/src/components/or-sort-header-v3/styles.ts

@@ -0,0 +1,23 @@
+export const SortHeaderRoot: string[] = [
+  // Layout
+  'inline-flex',
+  'justify-normal',
+  'items-center',
+
+  // Interactivity
+  'interactivity-auto',
+
+  // Typography
+  'typography-caption-regular',
+
+  // Typography (activated)
+  'activated:typography-caption-semibold',
+
+  // Theme
+  'theme-foreground-outline',
+  'dark:theme-foreground-outline-dark',
+
+  // Theme (activated)
+  'activated:theme-foreground-default',
+  'dark:activated:theme-foreground-default-dark',
+];

package/src/components/or-sort-header-v3/types.ts

@@ -0,0 +1,4 @@
+export interface SortHeaderModel {
+  column: string;
+  direction: 'asc' | 'desc';
+}

package/src/components/or-switch-v3/OrSwitch.stories3.ts

@@ -27,7 +27,7 @@ export default {
     },
 
     value: { // TODO: Remove Vue 2 fallback
-      table: { disable: true },
+      control: { type: 'object' },
     },
 
     inputValue: { // TODO: Rename to `value` after complete migration to Vue 3

package/src/components/or-tabs-v3/OrTabs.stories3.ts

@@ -1,6 +1,6 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/vue3';
-import { ref, watch } from 'vue-demi';
+import { ref } from 'vue-demi';
 import OrTabsDocs from './OrTabs.docs.mdx';
 import OrTabs from './OrTabs.vue';
 import { TabsVariant } from './props';
@@ -63,16 +63,11 @@ const Template: StoryFn<typeof OrTabs> = (args) => ({
 
   setup() {
     // State
-    const model = ref<string>();
-
-    // Effects
-    watch(model, (value) => {
-      console.debug(value);
-    });
+    const value = ref<string>();
 
     return {
       args,
-      model,
+      value,
       onUpdateModelValue: action('update:modelValue'),
       onInput: action('input'),
     };
@@ -80,7 +75,7 @@ const Template: StoryFn<typeof OrTabs> = (args) => ({
 
   template: `
     <OrTabs
-      v-model="model"
+      v-model="value"
       v-bind="args"
       @update:modelValue="onUpdateModelValue"
       @input="onInput"

package/src/components/or-tabs-v3/OrTabs.vue

@@ -8,7 +8,7 @@
       <OrTab
         v-for="tab in tabs.normal"
         :key="tab.value"
-        :selected="tab.value === proxyModelValue"
+        :selected="proxyModelValue === tab.value"
         @click.stop="proxyModelValue = tab.value"
       >
         {{ tab.label }}

package/src/components/or-textarea-v3/OrTextarea.vue

@@ -40,16 +40,18 @@
     </OrInputBox>
 
     <template v-if="!invalid">
-      <OrHint :disabled="disabled">
-        {{ hint }}
-
-        <template
-          v-if="maxLength"
-          v-slot:addon
-        >
-          {{ currentLength }} / {{ maxLength }}
-        </template>
-      </OrHint>
+      <template v-if="hint || maxLength">
+        <OrHint :disabled="disabled">
+          {{ hint }}
+
+          <template
+            v-if="maxLength"
+            v-slot:addon
+          >
+            {{ currentLength }} / {{ maxLength }}
+          </template>
+        </OrHint>
+      </template>
     </template>
 
     <template v-else>

package/dist/v2/OrSegmentedControl-908d951a.js

@@ -1,231 +0,0 @@
-import { defineComponent, ref, computed } from 'vue-demi';
-import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-import '@vueuse/core';
-import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
-
-const SegmentedControlItemRoot = [
-// Layout
-'flex', 'items-center', 'justify-center',
-// Shape
-'rounded-md',
-// Interactivity
-'interactivity-auto',
-// Theme
-'theme-foreground-default', 'dark:theme-foreground-default-dark',
-// Theme (selected)
-'selected:theme-background-default', 'dark:selected:theme-background-default-dark',
-// Theme (selected, enabled)
-'selected:enabled:shadow-card', 'dark:selected:enabled:shadow-card-dark'];
-const SegmentedControlItemRootSizes = {
-  'm': [
-  // Box
-  'h-[44px] md:h-[36px]',
-  // Spacing
-  'px-sm+ md:px-sm+',
-  // Typography
-  'typography-body-2-regular'],
-  's': [
-  // Box
-  'h-[36px] md:h-[32px]',
-  // Spacing
-  'px-sm+ md:px-sm',
-  // Typography
-  'typography-caption-regular']
-};
-
-var script$1 = defineComponent({
-  name: 'OrSegmentedControlItem',
-  inheritAttrs: false,
-  props: {
-    size: {
-      type: String,
-      required: true
-    },
-    selected: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props) {
-    // Refs
-    const root = ref();
-    // Styles
-    const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-segmented-control-item', ...SegmentedControlItemRoot, ...SegmentedControlItemRootSizes[props.size], classAttribute.value]);
-    return {
-      root,
-      rootStyles
-    };
-  }
-});
-
-/* script */
-const __vue_script__$1 = script$1;
-
-/* template */
-var __vue_render__$1 = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c('div', _vm._b({
-    ref: "root",
-    class: _vm.rootStyles,
-    attrs: {
-      "selected": _vm.selected ? '' : null,
-      "disabled": _vm.disabled ? '' : null
-    }
-  }, 'div', _vm.$attrs, false), [_c('div', {
-    class: ['truncate']
-  }, [_vm._t("default")], 2)]);
-};
-var __vue_staticRenderFns__$1 = [];
-
-/* style */
-const __vue_inject_styles__$1 = undefined;
-/* scoped */
-const __vue_scope_id__$1 = undefined;
-/* module identifier */
-const __vue_module_identifier__$1 = undefined;
-/* functional template */
-const __vue_is_functional_template__$1 = false;
-/* style inject */
-
-/* style inject SSR */
-
-/* style inject shadow dom */
-
-const __vue_component__$1 = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$1,
-  staticRenderFns: __vue_staticRenderFns__$1
-}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);
-
-var SegmentedControlSize;
-(function (SegmentedControlSize) {
-  SegmentedControlSize["M"] = "m";
-  SegmentedControlSize["S"] = "s";
-})(SegmentedControlSize || (SegmentedControlSize = {}));
-
-const SegmentedControlRoot = [
-// Layout
-'grid', 'grid-flow-col', 'auto-cols-fr',
-// Shape
-'rounded-md',
-// Spacing
-'px-[2px]', 'py-[2px]',
-// Theme
-'theme-background-surface-variant', 'dark:theme-background-surface-variant-dark'];
-const SegmentedControlRootSizes = {
-  'm': [],
-  's': []
-};
-
-var script = defineComponent({
-  name: 'OrSegmentedControl',
-  components: {
-    OrSegmentedControlItem: __vue_component__$1
-  },
-  inheritAttrs: false,
-  props: {
-    options: {
-      type: Array,
-      default: []
-    },
-    modelValue: {
-      type: String,
-      default: undefined
-    },
-    value: {
-      type: String,
-      default: undefined
-    },
-    size: {
-      type: String,
-      default: SegmentedControlSize.M
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['update:modelValue', 'input'],
-  expose: ['root'],
-  setup(props, context) {
-    // Refs
-    const root = ref();
-    // Styles
-    const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-segmented-control', ...SegmentedControlRoot, ...SegmentedControlRootSizes[props.size], classAttribute.value]);
-    // State
-    const proxyModelValue = computed({
-      get: () => {
-        var _a;
-        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value; // TODO: Remove Vue 2 fallback
-      },
-
-      set: value => {
-        context.emit('input', value);
-        context.emit('update:modelValue', value);
-      }
-    });
-    return {
-      root,
-      rootStyles,
-      proxyModelValue
-    };
-  }
-});
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c('div', _vm._b({
-    ref: "root",
-    class: _vm.rootStyles
-  }, 'div', _vm.$attrs, false), _vm._l(_vm.options, function (option) {
-    return _c('OrSegmentedControlItem', {
-      key: option.value,
-      attrs: {
-        "size": _vm.size,
-        "selected": option.value === _vm.proxyModelValue,
-        "disabled": _vm.disabled
-      },
-      on: {
-        "click": function ($event) {
-          $event.stopPropagation();
-          _vm.proxyModelValue = option.value;
-        }
-      }
-    }, [_vm._v("\n    " + _vm._s(option.label) + "\n  ")]);
-  }), 1);
-};
-var __vue_staticRenderFns__ = [];
-
-/* style */
-const __vue_inject_styles__ = undefined;
-/* scoped */
-const __vue_scope_id__ = undefined;
-/* module identifier */
-const __vue_module_identifier__ = undefined;
-/* functional template */
-const __vue_is_functional_template__ = false;
-/* style inject */
-
-/* style inject SSR */
-
-/* style inject shadow dom */
-
-const __vue_component__ = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__,
-  staticRenderFns: __vue_staticRenderFns__
-}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
-
-export { SegmentedControlSize as S, __vue_component__ as _ };