diff --git a/src/components/JalaliDatePicker.vue b/src/components/JalaliDatePicker.vue index 4f21169..0314157 100644 --- a/src/components/JalaliDatePicker.vue +++ b/src/components/JalaliDatePicker.vue @@ -24,7 +24,7 @@ const props = withDefaults( valueType: 'iso', placeholder: 'انتخاب تاریخ', disabled: false, - clearable: true, + clearable: false, size: 'large', }, ) @@ -99,33 +99,59 @@ function setToday() { gap: 8px; align-items: stretch; width: 100%; + max-width: 100%; + min-width: 0; + box-sizing: border-box; } -.jalali-date-field :deep(.vpd-input-group), +.jalali-date-field :deep(.vpd-main), .jalali-date-field :deep(.jalali-picker) { - flex: 1; + display: flex; + flex: 1 1 0; + min-width: 0; + max-width: 100%; +} + +.jalali-date-field :deep(.vpd-input-group) { + display: flex; + flex: 1 1 0; + min-width: 0; width: 100%; + direction: rtl; +} + +.jalali-date-field :deep(.vpd-icon-btn) { + flex: 0 0 40px; + width: 40px; + border-radius: 0 10px 10px 0; +} + +.size-large :deep(.vpd-icon-btn) { + flex-basis: 48px; + width: 48px; } .jalali-date-field :deep(.jalali-date-input), .jalali-date-field :deep(input) { - width: 100%; + flex: 1 1 0; + min-width: 0; + width: auto; height: 40px; border: 1px solid #d9d9d9; - border-radius: 8px; - padding: 4px 11px; + border-left: 1px solid #d9d9d9; + border-radius: 10px 0 0 10px; + padding: 4px 10px; font-family: inherit; font-size: 14px; direction: ltr; - text-align: left; + text-align: right; background: #fff; } .size-large :deep(.jalali-date-input), .size-large :deep(input) { height: 48px; - font-size: 16px; - border-radius: 10px; + font-size: 15px; } .jalali-date-field :deep(input:focus) { @@ -134,12 +160,17 @@ function setToday() { box-shadow: 0 0 0 2px rgba(32, 201, 151, 0.15); } +.jalali-date-field :deep(.vpd-clear-btn) { + display: none; +} + .today-btn { appearance: none; + flex: 0 0 auto; border: 1px solid #d9d9d9; background: #f8fafc; border-radius: 10px; - padding: 0 12px; + padding: 0 10px; cursor: pointer; font-family: inherit; font-weight: 700; @@ -154,7 +185,6 @@ function setToday() {