@300codes/design-system 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@300codes/design-system",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
   "files": [
     "src/components",
@@ -22,7 +22,8 @@
     "./tabs-list": "./src/components/TabsList/index.ts",
     "./search-input": "./src/components/SearchInput/index.ts",
     "./base-tooltip": "./src/components/BaseTooltip/index.ts",
-    "./flat-icon-button": "./src/components/FlatIconButton/index.ts"
+    "./flat-icon-button": "./src/components/FlatIconButton/index.ts",
+    "./quantity-selector": "./src/components/QuantitySelector/index.ts"
   },
   "scripts": {
     "build": "vue-tsc --noEmit",
@@ -31,7 +32,8 @@
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "format": "prettier --write .",
-    "type-check": "vue-tsc --noEmit"
+    "type-check": "vue-tsc --noEmit",
+    "release": "sh -c 'npm version $1 && git push && git push --tags && npm publish --access public' --"
   },
   "peerDependencies": {
     "vue": "^3.5.0"

package/src/components/FlatIconButton/FlatIconButton.stories.ts

@@ -12,9 +12,9 @@ const meta: Meta<FlatIconButtonProps> = {
     iconPath: { control: 'text' },
     iconSize: {
       control: 'select',
-      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      options: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', 'auto'],
     },
-    ariaLabel: { control: 'text' },
+    label: { control: 'text' },
   },
 };
 
@@ -25,7 +25,7 @@ export const Default: Story = {
   args: {
     iconName: 'close',
     iconSize: 'sm',
-    ariaLabel: 'Close',
+    label: 'Close',
   },
   render: (args: FlatIconButtonProps) => ({
     components: { FlatIconButton },
@@ -40,7 +40,7 @@ export const Search: Story = {
   args: {
     iconName: 'search',
     iconSize: 'sm',
-    ariaLabel: 'Search',
+    label: 'Search',
   },
   render: (args: FlatIconButtonProps) => ({
     components: { FlatIconButton },
@@ -55,7 +55,7 @@ export const MediumSize: Story = {
   args: {
     iconName: 'close',
     iconSize: 'md',
-    ariaLabel: 'Close',
+    label: 'Close',
   },
   render: (args: FlatIconButtonProps) => ({
     components: { FlatIconButton },

package/src/components/FlatIconButton/FlatIconButton.vue

@@ -6,13 +6,14 @@ export interface FlatIconButtonProps {
   iconName: string;
   iconPath?: string;
   iconSize?: IconSize;
-  ariaLabel?: string;
+  label: string;
+  disabled?: boolean;
 }
 
 withDefaults(defineProps<FlatIconButtonProps>(), {
   iconPath: '/icons',
   iconSize: 'sm',
-  ariaLabel: undefined,
+  disabled: false,
 });
 
 const emit = defineEmits<{
@@ -23,8 +24,9 @@ const emit = defineEmits<{
 <template>
   <button
     type="button"
-    class="flatIconButton inline-flex items-center justify-center cursor-pointer"
-    :aria-label="ariaLabel"
+    :class="['flatIconButton inline-flex items-center justify-center', disabled ? 'cursor-not-allowed' : 'cursor-pointer']"
+    :aria-label="label"
+    :disabled="disabled"
     @click="emit('click')"
   >
     <BaseIcon
@@ -43,8 +45,9 @@ const emit = defineEmits<{
   border-radius: var(--flatIconButton-radius, 9999px);
 }
 
-.flatIconButton:hover {
+.flatIconButton:hover:not(:disabled) {
   background-color: var(--flatIconButton-bg-hover, #f3f4f6);
+  color: var(--flatIconButton-fg-hover, #0e161b);
 }
 
 .flatIconButton:focus-visible {

package/src/components/QuantitySelector/QuantitySelector.stories.ts

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import type { ConcreteComponent } from 'vue';
+import { ref } from 'vue';
+import type { QuantitySelectorProps } from './QuantitySelector.vue';
+import QuantitySelector from './QuantitySelector.vue';
+
+const meta: Meta<QuantitySelectorProps> = {
+  title: 'Components/QuantitySelector',
+  component: QuantitySelector as unknown as ConcreteComponent<QuantitySelectorProps>,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'select', options: ['sm', 'md'] },
+    max: { control: 'number' },
+    disabled: { control: 'boolean' },
+    name: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<QuantitySelectorProps>;
+
+export const Default: Story = {
+  args: {
+    name: 'quantity',
+    size: 'md',
+  },
+  render: (args: QuantitySelectorProps) => ({
+    components: { QuantitySelector },
+    setup() {
+      const value = ref(1);
+      return { args, value };
+    },
+    template: '<QuantitySelector v-bind="args" v-model="value" />',
+  }),
+};
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { QuantitySelector },
+    setup() {
+      const sm = ref(1);
+      const md = ref(1);
+      return { sm, md };
+    },
+    template: `
+      <div class="flex items-center gap-6">
+        <QuantitySelector name="qty-sm" size="sm" v-model="sm" />
+        <QuantitySelector name="qty-md" size="md" v-model="md" />
+      </div>
+    `,
+  }),
+};
+
+export const WithMax: Story = {
+  args: {
+    name: 'quantity-max',
+    size: 'md',
+    max: 5,
+  },
+  render: (args: QuantitySelectorProps) => ({
+    components: { QuantitySelector },
+    setup() {
+      const value = ref(3);
+      return { args, value };
+    },
+    template: '<QuantitySelector v-bind="args" v-model="value" />',
+  }),
+};
+
+export const Disabled: Story = {
+  args: {
+    name: 'quantity-disabled',
+    size: 'md',
+    disabled: true,
+  },
+  render: (args: QuantitySelectorProps) => ({
+    components: { QuantitySelector },
+    setup() {
+      const value = ref(1);
+      return { args, value };
+    },
+    template: '<QuantitySelector v-bind="args" v-model="value" />',
+  }),
+};

package/src/components/QuantitySelector/QuantitySelector.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import type { IconSize } from '../../types/icon';
+import FlatIconButton from '../FlatIconButton/FlatIconButton.vue';
+
+export interface QuantitySelectorProps {
+  name: string;
+  size?: 'sm' | 'md';
+  max?: number;
+  disabled?: boolean;
+  inputLabel?: string;
+  decreaseLabel?: string;
+  increaseLabel?: string;
+}
+
+const props = withDefaults(defineProps<QuantitySelectorProps>(), {
+  size: 'md',
+  max: undefined,
+  disabled: false,
+  inputLabel: 'Quantity',
+  decreaseLabel: 'Decrease',
+  increaseLabel: 'Increase',
+});
+
+const model = defineModel<number>({ default: 1 });
+
+const text = ref(String(model.value));
+
+const isAtMin = computed(() => model.value <= 1);
+const isAtMax = computed(() => props.max !== undefined && model.value >= props.max);
+const iconSize = computed<IconSize>(() => (props.size === 'sm' ? 'md' : 'lg'));
+
+const disabledBtnStyle = { '--flatIconButton-fg': 'var(--quantitySelector-fg-disabled, #89979f)' };
+const disabledPropStyle = { '--flatIconButton-fg': 'transparent' };
+
+function onDecrease() {
+  if (props.disabled || isAtMin.value) return;
+  model.value--;
+}
+
+function onIncrease() {
+  if (props.disabled || isAtMax.value) return;
+  model.value++;
+}
+
+function onInput(event: Event) {
+  const input = event.target as HTMLInputElement;
+  const filtered = input.value.replace(/\D/g, '');
+  input.value = filtered;
+  text.value = filtered;
+}
+
+function onBlur() {
+  const parsed = parseInt(text.value, 10);
+  let value = isNaN(parsed) || parsed < 1 ? 1 : parsed;
+
+  if (props.max !== undefined) value = Math.min(value, props.max);
+
+  model.value = value;
+  text.value = String(value);
+}
+
+watch(model, (val) => {
+  text.value = String(val);
+});
+</script>
+
+<template>
+  <div
+    :class="[
+      'quantitySelector',
+      `quantitySelector--${size}`,
+      'inline-flex items-center overflow-hidden',
+    ]"
+  >
+    <FlatIconButton
+      icon-name="minus"
+      :icon-size="iconSize"
+      :label="decreaseLabel"
+      :disabled="disabled || isAtMin"
+      class="h-full aspect-square"
+      :style="disabled ? disabledPropStyle : isAtMin ? disabledBtnStyle : undefined"
+      @click="onDecrease"
+    />
+
+    <input
+      :name="name"
+      :value="disabled ? '1' : text"
+      type="text"
+      inputmode="numeric"
+      pattern="[0-9]*"
+      autocomplete="off"
+      :aria-label="inputLabel"
+      :disabled="disabled"
+      :class="[
+        'quantitySelector__input',
+        'bg-transparent border-0 outline-none text-center leading-normal h-full shrink-0 disabled:cursor-not-allowed',
+      ]"
+      @input="onInput"
+      @blur="onBlur"
+    >
+
+    <FlatIconButton
+      icon-name="plus"
+      :icon-size="iconSize"
+      :label="increaseLabel"
+      :disabled="disabled || isAtMax"
+      class="h-full aspect-square"
+      :style="disabled ? disabledPropStyle : isAtMax ? disabledBtnStyle : undefined"
+      @click="onIncrease"
+    />
+  </div>
+</template>
+
+<style scoped>
+.quantitySelector {
+  --_h: var(--quantitySelector-h, 3.5rem);
+  --_input-w: var(--quantitySelector-input-w, 2.125rem);
+  --_fs: var(--quantitySelector-font-size, 1rem);
+
+  height: var(--_h);
+  background-color: var(--quantitySelector-bg, #f3f5f7);
+  border: var(--quantitySelector-border-width, 0) solid var(--quantitySelector-border, #d6dde1);
+  border-radius: var(--quantitySelector-radius, 9999px);
+}
+
+.quantitySelector--sm {
+  --_h: var(--quantitySelector-sm-h, 2.5rem);
+  --_input-w: var(--quantitySelector-sm-input-w, 2.875rem);
+  --_fs: var(--quantitySelector-sm-font-size, 0.875rem);
+}
+
+.quantitySelector__input {
+  width: var(--_input-w);
+  font-size: var(--_fs);
+  color: var(--quantitySelector-fg, #0e161b);
+}
+
+.quantitySelector__input:hover:not(:disabled) {
+  background-color: var(--quantitySelector-bg-hover, #f3f5f7);
+}
+</style>

package/src/components/QuantitySelector/index.ts

@@ -0,0 +1,2 @@
+export { default as QuantitySelector } from './QuantitySelector.vue';
+export type { QuantitySelectorProps } from './QuantitySelector.vue';

package/src/components/SelectInput/SelectInput.vue

@@ -261,7 +261,7 @@ watch(isMobile, () => {
 
           <FlatIconButton
             icon-name="close"
-            aria-label="Close"
+            label="Close"
             class="ml-auto"
             @click="closeDropdown(true)"
           />

package/src/components/TextInput/TextInput.vue

@@ -129,7 +129,7 @@ defineExpose<{ el: Ref<HTMLInputElement | undefined> }>({ el });
       :icon-name="iconLeft.name"
       :icon-path="iconLeft.iconPath"
       :icon-size="iconLeft.size"
-      :aria-label="iconLeft.ariaLabel"
+      :label="iconLeft.ariaLabel || iconLeft.name"
       :class="['absolute top-1/2 -translate-y-1/2 left-3', iconLeft.class]"
       @click="emit('clickIcon', 'left')"
     />
@@ -139,7 +139,7 @@ defineExpose<{ el: Ref<HTMLInputElement | undefined> }>({ el });
       :icon-name="iconRight.name"
       :icon-path="iconRight.iconPath"
       :icon-size="iconRight.size"
-      :aria-label="iconRight.ariaLabel"
+      :label="iconRight.ariaLabel || iconRight.name"
       :class="['absolute top-1/2 -translate-y-1/2 right-3', iconRight.class]"
       @click="emit('clickIcon', 'right')"
     />

package/src/components/index.ts

@@ -13,4 +13,5 @@ export * from './TabsList/index';
 export * from './SearchInput/index';
 export * from './BaseTooltip/index';
 export * from './FlatIconButton/index';
+export * from './QuantitySelector/index';
 export type { IconSize } from '../types/icon';

package/src/css/tokens.css

@@ -385,6 +385,28 @@
   --flatIconButton-p:         theme(--spacing-1);
   --flatIconButton-radius:    theme(--radius-full);
 
+  /* ────────────────────────────────────────────────
+   * QuantitySelector
+   * ──────────────────────────────────────────────── */
+
+  --quantitySelector-bg:             theme(--color-input-bg);
+  --quantitySelector-fg:             theme(--color-input-fg);
+  --quantitySelector-bg-hover:       #f3f5f7;
+  --quantitySelector-fg-disabled:    theme(--color-disabled-foreground);
+  --quantitySelector-border:         theme(--color-input-border);
+  --quantitySelector-border-width:   0;
+  --quantitySelector-radius:         9999px;
+
+  /* md (default) */
+  --quantitySelector-h:              theme(--spacing-14);   /* 56px */
+  --quantitySelector-input-w:        theme(--spacing-12);   /* 48px */
+  --quantitySelector-font-size:      theme(--text-base);    /* 16px */
+
+  /* sm */
+  --quantitySelector-sm-h:           theme(--spacing-10);   /* 40px */
+  --quantitySelector-sm-input-w:     theme(--spacing-10);   /* 40px */
+  --quantitySelector-sm-font-size:   theme(--text-sm);      /* 14px */
+
   /* ────────────────────────────────────────────────
    * TabsList
    * ──────────────────────────────────────────────── */