feat(input-ymd): add block option (#234)

close #234
globalbrain · Apr 5, 2023 · 0db52f4 · 0db52f4
1 parent c4aa07e
commit 0db52f4
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git a/docs/components/input-ymd.md b/docs/components/input-ymd.md
@@ -27,7 +27,7 @@ Import `<SInputYMD>` component and pass in `:value` props. The value should be a
 ```vue
 <script setup lang="ts">
 import { ref } from 'vue'
-import SInputHMS from '@globalbrain/sefirot/lib/components/SInputYMD.vue'
+import SInputYMD from '@globalbrain/sefirot/lib/components/SInputYMD.vue'
 
 const input = ref({
   year: null,
@@ -208,6 +208,20 @@ interface Props {
 <SInputYMD no-date v-model="..." />
 ```
 
+### `:block`
+
+Make the input full width to fit the parent container.
+
+```ts
+interface Props {
+  block?: boolean
+}
+```
+
+```vue-html
+<SInputYMD block v-model="..." />
+```
+
 ### `:disabled`
 
 Mark input as disabled. When this prop is set, users may not be able to focus the element nor trigger any events.

diff --git a/lib/components/SInputYMD.vue b/lib/components/SInputYMD.vue
@@ -28,6 +28,7 @@ const props = defineProps<{
   noYear?: boolean
   noMonth?: boolean
   noDate?: boolean
+  block?: boolean
   disabled?: boolean
   value?: Value
   modelValue?: Value
@@ -139,7 +140,7 @@ function createRequiredTouched(): boolean[] {
     :hide-error="hideError"
     :validation="validation"
   >
-    <div class="container" :class="{ focus: isFocused }">
+    <div class="container" :class="{ focus: isFocused, block }">
       <input
         v-if="!noYear"
         class="input year"
@@ -278,11 +279,15 @@ function createRequiredTouched(): boolean[] {
 
   &:hover { border-color: var(--input-hover-border-color); }
   &.focus { border-color: var(--input-focus-border-color); }
+
+  &.block {
+    width: 100%;
+  }
 }
 
 .input {
-  font-family: var(--font-family-number);
   line-height: 24px;
+  font-feature-settings: "tnum";
   background-color: transparent;
 
   &::placeholder {

diff --git a/stories/components/SInputYMD.01_Playground.story.vue b/stories/components/SInputYMD.01_Playground.story.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import SInputYMD from 'sefirot/components/SInputYMD.vue'
 import { ref } from 'vue'
+import { setupRouter } from '../_support/Utils'
 
 const title = 'Components / SInputYMD / 01. Playground'
 const docs = '/components/input-ymd'
@@ -21,14 +22,15 @@ function state() {
     noYear: false,
     noMonth: false,
     noDate: false,
+    block: false,
     disabled: false,
     error: false
   } as const
 }
 </script>
 
 <template>
-  <Story :title="title" :init-state="state" source="Not available" auto-props-disabled>
+  <Story :title="title" :setup-app="setupRouter" :init-state="state" source="Not available" auto-props-disabled>
     <template #controls="{ state }">
       <HstSelect
         title="size"
@@ -67,6 +69,10 @@ function state() {
         title="no-date"
         v-model="state.noDate"
       />
+      <HstCheckbox
+        title="block"
+        v-model="state.block"
+      />
       <HstCheckbox
         title="disabled"
         v-model="state.disabled"
@@ -89,6 +95,7 @@ function state() {
           :no-year="state.noYear"
           :no-month="state.noMonth"
           :no-date="state.noDate"
+          :block="state.block"
           :disabled="state.disabled"
           v-model="input"
         />